上代码
直接用看效果,学习一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#d1{
width:800px;
height:800px;
border: 1px solid #ccc;
position: relative;
background: #fafafa;
}
#d1>div{
width:130px;
height:30px;
border:1px solid #ccc;
border-radius: 8px;
position: absolute;
z-index: 2;
text-align: center;
line-height: 30px;
background: #fff;
}
#d1>svg{
width: 100%;
height:100%;
position: absolute;
z-index: 1
}
.input .point{
position: absolute;
border:6px solid transparent;
border-top:6px solid #ccc;
top:0px;
left:58px;
}
.input .circle{
position: absolute;
width: 10px;
height: 10px;
border:1px solid #ccc;
top:-7px;
left:60px;
border-radius: 50%;
background: #fff;
}
.output .circle{
position: absolute;
width: 10px;
height: 10px;
border:1px solid #ccc;
bottom:-7px;
left:60px;
border-radius: 50%;
background: #fff;
cursor:crosshair;
}
.output .circle:hover{
background:#FC9901;
}
</style>
</head>
<body>
<ul class = "shuiguo">
<li draggable = "true" data-name = "apple">苹果</li>
<li draggable = "true" data-name = "bnana">香蕉</li>
<li draggable = "true" data-name = "pineapple">菠萝</li>
<li draggable = "true" data-name = "Mango">芒果</li>
<li draggable = "true" data-name = "watermelon">西瓜</li>
</ul>
<div id = "d1">
<!-- <div class = "pingguo">
<span class = "icon"></span>
<span>苹果</span>
<div class = "input">
<span class = "point"></span>
<span class = "circle"></span>
</div>
<div class = "output">
<span class = "circle"></span>
</div>
</div> -->
<svg>
<!-- <g>
<path d = "M200 300 Q200 100 300 200 T500 600" stroke = "#000" fill = "none" style = "stroke-width: 1px;"/>
</g> -->
</svg>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
var dragData = [
// {
// id:1,
// label:"苹果",
// name:"pingguo",
// x:40,
// y:50,
// style:"pingguo",
// icon:"pingguoIcon"
// }
];
function reload(){
$(function(){
var html = "";
var g = "";
if($('svg').siblings()){
var prev = $('svg').siblings();
for(var i = 0; i < prev.length;i++){
prev[i].remove();
}
}
for(var i = 0;i < dragData.length; i++){
console.log(dragData[i]);
if(dragData[i] != undefined){
var data = dragData[i];
html +=
`
<div class = "${data.name}" data-id = "${data.id}" data-inx = "${data.inx}" data-iny = "${data.iny}" data-label = "${data.label}" ondragstart = "insideDrag(this)" draggable = "true" style = "transform:translate(${data.x}px,${data.y}px)">
<span class = "${data.icon}" data-id = "${data.id}"></span>
<span data-id = "${data.id}">${data.label}</span>
<div class = "input">
<span class = "point" style = "display:${data.point}"></span>
<span class = "circle" title = "输入" style = "display:${data.circle}"></span>
</div>
<div class = "output">
<span class = "circle" title = "输出" onmousedown = "noDrag(this)" onmouseup = "addDrag(this)" onmouseleave = "draw(this)" onmouseenter = "noMove()" data-id = "${data.id}"></span>
</div>
</div>
`
if(data.link.length > 0){
for(var j = 0; j < data.link.length;j++){
g +=
`
<g class = "${data.link[j].name}">
<path d = "M${data.outx} ${data.outy} Q${data.link[j].mx1} ${data.link[j].my1} ${data.link[j].mx2} ${data.link[j].my2} T${data.link[j].dx} ${data.link[j].dy}" stroke = "#CCCCCC" fill = "none" style = "stroke-width: 1px;"/>
</g>
`
}
}
}
}
$('svg').before(html);
$('svg').html(g);
console.log($('svg').siblings());
})
}
//reload();
document.getElementById('d1').ondragover = function(e){
e.preventDefault();
}
var dWidth = Number($('#d1').css('width').slice(0,-2));
console.log(dWidth);
var dHeight = Number($('#d1').css('height').slice(0,-2));
console.log(dHeight);
var dClient = $("#d1").offset().top;
var dLeft = $("#d1").offset().left;
console.log('顶部位置',dClient);
console.log('左边位置',dLeft);
function drag(word,name,type,id){
console.log(type);
console.log(name);
document.getElementById('d1').ondrop = function(e){
console.log('e.target',e.target.dataset.id);
var x;
var y;
console.log('e.clientX',e.clientX);
console.log('e.clientY',e.clientY);
if((dWidth - e.clientX + dLeft + 65) >= 132){
x = e.clientX - 65 - dLeft;
}else{
x = dWidth - 133;
}
if((e.clientX - 65 - dLeft) < 65){
x = 1;
}
if((dHeight - e.clientY + dClient + 15) >= 33){
y = e.clientY-15- dClient;
}else{
y = dHeight - 33;
}
if(e.clientY - 15 - dClient < 0 ){
y = 1;
}
if(type == "outside"){
console.log('放下了');
dragData.push({
id:dragData.length,
label:word,
name:name,
x:x,
y:y,
outx:x + 68,
outy:y + 30,
inx:x +65,
iny:y - 1,
link:[],
linked:[],
dx:0,
dy:0,
mx1:0,
my1:0,
mx2:0,
my2:0,
style:name,
point:"none",
circle:"inline-block",
draw:false,
icon:name + "Icon"
});
console.log(dragData);
reload();
}
if(type == "inside"){
console.log(word,name,type,id);
for(var i = 0;i < dragData.length;i++){
if(id == dragData[i].id){
dragData[i].x = x;
dragData[i].y = y;
dragData[i].outx = dragData[i].x + 68;
dragData[i].outy = dragData[i].y + 30;
dragData[i].inx = dragData[i].x + 65;
dragData[i].iny = dragData[i].y - 1;
console.log('dragData[i].link',dragData[i].link);
for(let j = 0; j < dragData[i].link.length;j++){
dragData[i].link[j].linkId = parseFloat(dragData[i].link[j].name.split("|")[1]);
}
for(var k = 0 ; k < dragData[i].linked.length;k++){
console.log('dragData[i].linked[k]',dragData[i].linked[k]);
for(let j = 0; j < dragData.length;j++){
if(dragData[i].linked[k].linkedNum == dragData[j].id){
console.log('ID一样了啊');
for(let m = 0; m < dragData[j].link.length; m++){
if(dragData[i].linked[k].name == dragData[j].link[m].name){
console.log("名字一样了啊");
dragData[j].link[m].dx = dragData[i].inx;
dragData[j].link[m].dy = dragData[i].iny;
dragData[j].link[m].mx1 = dragData[j].outx;
dragData[j].link[m].my1 = dragData[j].link[m].dy > dragData[j].outy?dragData[j].outy + (dragData[j].link[m].dy-dragData[j].outy)/4:dragData[j].outy - (dragData[j].link[m].dy-dragData[j].outy)/4;
dragData[j].link[m].mx2 = dragData[j].outx + (dragData[j].link[m].dx-dragData[j].outx)/2,
dragData[j].link[m].my2 = dragData[j].outy +(dragData[j].link[m].dy-dragData[j].outy)/2
}
}
}
}
}
if(dragData[i].link.length > 0){
for(var j = 0; j < dragData[i].link.length;j++){
dragData[i].link[j].mx1 = dragData[i].outx;
dragData[i].link[j].my1 = dragData[i].link[j].dy > dragData[i].outy?dragData[i].outy + (dragData[i].link[j].dy-dragData[i].outy)/4:dragData[i].outy - (dragData[i].link[j].dy-dragData[i].outy)/4;
dragData[i].link[j].mx2 = dragData[i].outx + (dragData[i].link[j].dx-dragData[i].outx)/2,
dragData[i].link[j].my2 = dragData[i].outy +(dragData[i].link[j].dy-dragData[i].outy)/2
}
}
}
}
reload();
}
}
}
var shuiguo = $('.shuiguo li');
console.log(shuiguo);
for(var i = 0;i < shuiguo.length;i++){
console.log(shuiguo[i]);
shuiguo[i].ondragstart = function(){
console.log('东完了')
drag(this.innerHTML,this.dataset.name,'outside');
}
}
function insideDrag(item){
console.log(item);
drag(item.dataset.label,item.className,'inside',item.dataset.id);
}
function noDrag(item){
console.log(item.parentNode.parentNode);
item.parentNode.parentNode.setAttribute('draggable',false);
var parent = item.parentNode.parentNode;
for(var i = 0; i < dragData.length;i++){
if(parent.dataset.id == dragData[i].id){
dragData[i].draw = true;
dragData[i].link.push({
name:parent.dataset.id + parent.className,
dx:0,
dy:0,
mx1:0,
my1:0,
mx2:0,
my2:0
});
$('body').on('mouseup',function(e){
// console.log('item.parentNode.parentNode',item.parentNode.parentNode);
for(var j = 0; j < dragData.length; j++){
if(parent.dataset.id == dragData[j].id){
console.log('页面抬起了');
dragData[j].draw = false;
console.log(e.target.title);
console.log(e.target.parentNode.parentNode);
console.log(e.target.parentNode.parentNode.dataset.id);
if(e.target.title){
if(e.target.title == "输入"){
$('svg').unbind('mousemove');
dragData[j].link[dragData[j].link.length - 1].name = dragData[j].link[dragData[j].link.length - 1].name + "|" + e.target.parentNode.parentNode.dataset.id + e.target.parentNode.parentNode.className;
dragData[j].link[dragData[j].link.length - 1].dx = Number(e.target.parentNode.parentNode.dataset.inx);
dragData[j].link[dragData[j].link.length - 1].dy = Number(e.target.parentNode.parentNode.dataset.iny);
for(let i = 0; i < dragData.length; i++){
if(e.target.parentNode.parentNode.dataset.id == dragData[i].id){
dragData[i].linked.push({
name: dragData[j].link[dragData[j].link.length - 1].name,
linkedNum:parseFloat(dragData[j].link[dragData[j].link.length - 1].name)
})
dragData[i].circle = "none";
dragData[i].point = "inline-block";
}
}
}else{
dragData[j].link.splice(dragData[j].link.length-1,1);
$('svg').unbind('mousemove');
reload();
}
}else{
dragData[j].link.splice(dragData[j].link.length-1,1);
$('svg').unbind('mousemove');
}
reload();
}
}
$('body').unbind('mouseup');
})
//reload();
}
}
}
function addDrag(item){
item.parentNode.parentNode.setAttribute('draggable',true);
var parent = item.parentNode.parentNode;
for(var i = 0; i < dragData.length;i++){
if(parent.dataset.id == dragData[i].id){
dragData[i].draw = false;
console.log(dragData[i]);
}
}
}
function draw(item){
item.parentNode.parentNode.setAttribute('draggable',true);
var parent = item.parentNode.parentNode;
for(var i = 0; i < dragData.length;i++){
if(parent.dataset.id == dragData[i].id){
if(dragData[i].draw == true){
$('svg').mousemove(function(e){
console.log(parent.dataset.id);
for(var i = 0; i < dragData.length;i++){
if(parent.dataset.id == dragData[i].id){
console.log(dragData[i]);
// dragData[i].link.push({
// name:"nihao",
// dx:e.offsetX,
// dy:e.offsetY,
// mx1:dragData[i].outx,
// my1:dragData[i].dy > dragData[i].outy?dragData[i].outy + (dragData[i].dy-dragData[i].outy)/4:dragData[i].outy - (dragData[i].dy-dragData[i].outy)/4,
// mx2:dragData[i].outx + (dragData[i].dx-dragData[i].outx)/2,
// my2:dragData[i].outy +(dragData[i].dy-dragData[i].outy)/2
// });
if(dragData[i].link[dragData[i].link.length-1]){
dragData[i].link[dragData[i].link.length-1].dx = e.offsetX;
dragData[i].link[dragData[i].link.length-1].dy = e.offsetY;
dragData[i].link[dragData[i].link.length-1].mx1 = dragData[i].outx;
dragData[i].link[dragData[i].link.length-1].my1 = dragData[i].dy > dragData[i].outy?dragData[i].outy + (dragData[i].dy-dragData[i].outy)/4:dragData[i].outy - (dragData[i].dy-dragData[i].outy)/4;
dragData[i].link[dragData[i].link.length-1].mx2 = dragData[i].outx + (dragData[i].dx-dragData[i].outx)/2,
dragData[i].link[dragData[i].link.length-1].my2 = dragData[i].outy +(dragData[i].dy-dragData[i].outy)/2
}
//
dragData[i].dx = e.offsetX;
dragData[i].dy = e.offsetY;
dragData[i].mx1 = dragData[i].outx;
if(dragData[i].dy > dragData[i].outy){
dragData[i].my1 = dragData[i].outy + (dragData[i].dy-dragData[i].outy)/4;
}else{
dragData[i].my1 = dragData[i].outy - (dragData[i].dy-dragData[i].outy)/4;
}
dragData[i].mx2 = dragData[i].outx + (dragData[i].dx-dragData[i].outx)/2
dragData[i].my2 = dragData[i].outy +(dragData[i].dy-dragData[i].outy)/2
}
}
reload();
console.log(2333);
})
}else{
$('svg').unbind('mousemove');
}
}
}
}
function noMove(){
$('svg').unbind('mousemove');
}
$('svg').mouseup(function(e){
console.log(e.target);
$('svg').unbind('mousemove');
for(var i = 0; i < dragData.length;i++){
dragData[i].draw = false;
}
console.log('起来了');
})
// $('body').mouseup(function(e){
// console.log('页面抬起了');
// console.log(e.target.title);
// if(e.target.title){
// if(e.target.title == "输入"){
// $('svg').unbind('mousemove');
// }
// }
// })
</script>
</body>
</html>