js利用HTML5的拖拽API做流程圖
阿新 • • 發佈：2019-01-28
上程式碼
直接用看效果，學習一下
<!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>