js利用HTML5的拖拽API做流程图

上代码

直接用看效果，学习一下

<!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>

js利用HTML5的拖拽API做流程图相关推荐

html 树形图可拖拽,HTML5拖拽API实现vue树形拖拽组件
因业务场景需要一个可拖拽修改节点位置的树形组件,因此动手撸了一个,乘此机会摸了一把html5原生拖拽.近期有时间将核心部分代码抽出,简单说下实现方式. 1.树形结构-组件递归使用树形结构非常简单,t ...
HTML5原生拖拽/拖放 Drag Drop 详解
转载自:juejin.im/post/5a169d- 前言拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准 ...
HTML5原生拖拽/拖放(drag drop)详解
前言拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
JQuery Dialog(JS模态窗口,可拖拽的DIV)
JQuery Dialog(JS模态窗口,可拖拽的DIV) 吴剑 2012-08-08 原创文章,转载必需注明出处:http://www.cnblogs.com/wu-jian/ 效果图调用示意图 ...
java使用重绘实现拖动_原生JS使用Canvas实现拖拽式绘图功能
一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包含圆心坐标点和半径)等实体 2.原生JavaScript实现,不依赖任何第三方j ...
C#利用控件拖拽技术制作拼图游戏
C#利用控件拖拽技术制作拼图游戏这篇文章主要介绍了C#利用控件拖拽技术制作拼图游戏的方法以及核心代码,需要的朋友可以参考下主要实现的功能: 1.程序附带多张拼图随机拼图. 2.可手动添加拼图. 3 ...
html5限制拖拽区域怎么实现,html5怎么实现拖拽
html5实现拖拽的方法:首先新建一个空的HTML5结构:然后在body元素中放置一个div:最后通过allowDrop,drag和drop三个函数实现拖拽功能即可. 本文操作环境:Windows7系 ...
[开源应用]利用HTTPHandler+resumableJs+HTML5实现拖拽上传[大]文件
前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性提交所有的内容进内存是不现实的.大文件带来问题还有是否支持断点传输和多文件同时传输. 本文以resumableJs为例,介绍了如何在ASP. ...
html5 div拖拽插件,div拖拽插件——JQ.MoveBox.js(自制JQ插件)
有一段时间没更新博客了,都不知道忙些什么,学习也没什么进展,惭愧. 这一周空闲的时间学着自己写一下JQ插件. 以前用原生的JS做过类似拖拽div的效果,现在按原思路改做成一个JQ的小插件,当作制作JQ ...

js利用HTML5的拖拽API做流程图

js利用HTML5的拖拽API做流程图相关推荐

最新文章

热门文章