上代码
直接用看效果，学习一下
<!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)/2dragData[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>
)
