zoukankan      html  css  js  c++  java
  • 流程图(原生拖拽)

      1 <!DOCTYPE html>
      2 <html lang="en" onselectstart='return false'>
      3 
      4     <head>
      5         <meta charset="UTF-8">
      6         <title>Document</title>
      7         <style type="text/css">
      8             #d1 {
      9                 width: 800px;
     10                 height: 800px;
     11                 border: 1px solid #ccc;
     12                 background: #fafafa;
     13                 position: relative;
     14             }
     15             #d1 .drawContent{
     16                 position: absolute;
     17                 width: 100%;
     18                 height: 100%;
     19             }
     20             #d1 .drawContent div {
     21                 width: 130px;
     22                 height: 30px;
     23                 border: 1px solid #ccc;
     24                 background: #fff;
     25                 border-radius: 8px;
     26                 position: absolute;
     27                 text-align: center;
     28                 line-height: 30px;
     29                 z-index: 2;
     30                 cursor: move;
     31             }
     32             
     33             #d1 .drawContent div span {
     34                 display: inline-block;
     35                 width: 130px;
     36                 height: 20px;
     37                 line-height: 20px;
     38                 cursor: move;
     39             }
     40             
     41             #d1 .drawContent div i {
     42                 display: inline-block;
     43                 width: 10px;
     44                 height: 10px;
     45                 background: #fff;
     46                 border-radius: 50%;
     47                 position: absolute;
     48                 top: -7px;
     49                 left: 46%;
     50                 border: 1px solid #ccc;
     51                 cursor: default;
     52             }
     53             
     54             #d1 .drawContent div s {
     55                 display: inline-block;
     56                 width: 10px;
     57                 height: 10px;
     58                 background: #fff;
     59                 border-radius: 50%;
     60                 position: absolute;
     61                 bottom: -7px;
     62                 left: 46%;
     63                 border: 1px solid #ccc;
     64                 cursor: crosshair;
     65             }
     66             
     67             #d1 .drawContent div u {
     68                 position: absolute;
     69                 display: inline-block;
     70                 border: 6px solid transparent;
     71                 border-top: 6px solid #ccc;
     72                 top: 0px;
     73                 left: 58px;
     74             }
     75             
     76             #d1 .drawContent div s:hover {
     77                 background: #F8BC06;
     78             }
     79             
     80             #d1 svg {
     81                 width: 100%;
     82                 height: 100%;
     83                 position: absolute;
     84                 z-index: 1;
     85             }
     86             
     87             #d2 {
     88                 width: 300px;
     89                 height: 2000px;
     90             }
     91             
     92             ul li {
     93                 cursor: default;
     94             }
     95         </style>
     96     </head>
     97 
     98     <body>
     99         <ul id="Dragblock">
    100             <li data-name='xiangjiao'>
    101                 <span>香蕉</span>
    102             </li>
    103             <li data-name='pingguo'>
    104                 <span>苹果</span>
    105             </li>
    106             <li data-name='liulian'>
    107                 <span>榴莲</span>
    108             </li>
    109             <li data-name='xigua'>
    110                 <span>西瓜</span>
    111             </li>
    112             <li data-name='xihongshi'>
    113                 <span>西红柿</span>
    114             </li>
    115         </ul>
    116         <div id='d1'>
    117             <div class="drawContent">
    118 
    119             </div>
    120             <svg></svg>
    121         </div>
    122         <div id='d2'></div>
    123         <script type="text/x-handlebars-template" id="content">
    124             {{#each this}}
    125             <div class="{{name}}" data-drag="1" data-id='{{id}}' data-inx='{{inx}}' data-iny='{{iny}}' style="top:{{y}}px;left:{{x}}px">
    126                 <u style="display:{{arrow}}"></u>
    127                 <span class="label">{{label}}</span>
    128                 <s title="输出"></s>
    129             </div>
    130             {{/each}}
    131         </script>
    132         <script type="text/x-handlebars-template" id="line">
    133             {{#each this}} {{#each link}}
    134             <g class="{{name}}">
    135                 <path d="M{{../outx}} {{../outy}} Q{{mx1}} {{my1}} {{mx2}} {{my2}} T{{dx}} {{dy}}" stroke="#CCCCCC" fill="none" style="stroke- 1px;" />
    136             </g>
    137             {{/each}} {{/each}}
    138         </script>
    139         <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    140         <script src="https://cdn.bootcss.com/handlebars.js/4.0.10/handlebars.min.js"></script>
    141         <script type="text/javascript">
    142             var element;
    143             // 获得容器的宽度
    144             var dWidth = Number($('#d1').css('width').slice(0, -2));
    145             // 获得容器的高度
    146             var dHeight = Number($('#d1').css('height').slice(0, -2));
    147             var dragData = []
    148 
    149             function reload() {
    150                 var myTemplate = Handlebars.compile($("#content").html());
    151                 $('#d1 .drawContent').html(myTemplate(dragData));
    152                 var myLine = Handlebars.compile($("#line").html());
    153                 $('#d1 svg').html(myLine(dragData));
    154             }
    155 //            reload();
    156             //按下列表创建虚像
    157             $('#Dragblock li').mousedown(function(e) {
    158                 var span = document.createElement('span');
    159                 span.innerHTML = $(this).text();
    160                 span.setAttribute('data-name', $(this).data('name'));
    161                 span.style.opacity = 0.6;
    162                 span.style.position = 'absolute';
    163                 span.style.top = (e.pageY - 8) + 'px';
    164                 span.style.left = (e.pageX - 8) + 'px';
    165                 span.style.zIndex = 5;
    166                 $(this).append(span);
    167                 element = $(this).children('span:last-child');
    168                 console.log('element', element);
    169             })
    170             // 文档鼠标抬起时判断在不在容器内,创建元素
    171             $(document).mouseup(function(e) {
    172                 console.log('e.target', e.target);
    173                 $('#d1').unbind('mousemove');
    174                 if(element) {
    175                     if(e.pageY > $('#d1').offset().top && e.pageX > $('#d1').offset().left) {
    176                         console.log('e.offsetY', e.offsetY, 'e.offsetX', e.offsetX);
    177                         console.log(element);
    178                         var x = e.pageX - $('#d1').offset().left - e.offsetX;
    179                         var y = e.pageY - $('#d1').offset().top - e.offsetY;
    180                         //判断x
    181                         if((x >= 0 && x <= dWidth - 132)) {
    182                             x = x;
    183                         } else if(x < 0) {
    184                             x = 1;
    185                         } else if(x > dWidth - 132) {
    186                             x = dWidth - 132
    187                         }
    188                         //判断y
    189                         if((y >= 0 && y <= dHeight - 32)) {
    190                             y = y;
    191                         } else if(y < 0) {
    192                             y = 1;
    193                         } else if(y > dHeight - 32) {
    194                             y = dHeight - 32
    195                         }
    196                         dragData.push({
    197                             id: dragData.length,
    198                             name: element.data('name'),
    199                             draw: false,
    200                             label: element.text(),
    201                             x: x,
    202                             y: y,
    203                             outx: x + 68,
    204                             outy: y + 30,
    205                             inx: x + 65,
    206                             iny: y - 1,
    207                             link: [],
    208                             linked: [],
    209                             dx: 0,
    210                             dy: 0,
    211                             arrow: "none"
    212                         })
    213                         reload();
    214                         element.remove();
    215                         element = undefined;
    216                     } else {
    217                         element.remove();
    218                         element = undefined;
    219                     }
    220                 }
    221 
    222             })
    223             //拖动虚像在文档中进行移动
    224             $(document).mousemove(function(e) {
    225                 //console.log('x',e.pageX,'y',e.pageY);
    226                 if(element) {
    227                     element.css({
    228                         'top': (e.pageY - 8) + 'px',
    229                         'left': (e.pageX - 8)
    230                     });
    231                 }
    232             })
    233             //给创建的新的组件加上mousedown事件
    234             var waitElement;
    235             $('#d1 > .drawContent').on('mousedown', 'div', function(e) {
    236                 waitElement = $(this);
    237                 console.log(waitElement);
    238                 var dx = e.offsetX
    239                 var dy = e.offsetY
    240                 console.log('e.offsetX', e.offsetX)
    241                 console.log('e.offsetY', e.offsetY)
    242                 //容器的mousemove事件
    243                 $('#d1').on("mousemove",function(e) {
    244                     if(waitElement) {
    245                         waitElement.css({
    246                             top: (e.pageY - $('#d1').offset().top - dy) + 'px',
    247                             left: (e.pageX - $('#d1').offset().left - dx) + 'px'
    248                         });
    249                         console.log(waitElement.data('id'));
    250                         var id = waitElement.data('id')
    251                         var x = e.pageX - $('#d1').offset().left - dx;
    252                         var y = e.pageY - $('#d1').offset().top - dy;
    253                         //判断x
    254                         if((x >= 0 && x <= dWidth - 132)) {
    255                             x = x;
    256                         } else if(x < 0) {
    257                             x = 1;
    258                         } else if(x > dWidth - 132) {
    259                             x = dWidth - 132
    260                         }
    261                         //判断y
    262                         if((y >= 0 && y <= dHeight - 32)) {
    263                             y = y;
    264                         } else if(y < 0) {
    265                             y = 1;
    266                         } else if(y > dHeight - 32) {
    267                             y = dHeight - 32
    268                         }
    269                         for(var i = 0; i < dragData.length; i++) {
    270                             if(id == dragData[i].id) {
    271                                 console.log(dragData[i]);
    272                                 dragData[i].x = x;
    273                                 dragData[i].outx = dragData[i].x + 68;
    274                                 dragData[i].inx = dragData[i].x + 65;
    275                                 dragData[i].y = y;
    276                                 dragData[i].outy = dragData[i].y + 30;
    277                                 dragData[i].iny = dragData[i].y - 1;
    278                                 console.log('要开始了')
    279                                 for(let j = 0; j < dragData[i].link.length; j++) {
    280                                     dragData[i].link[j].linkId = parseFloat(dragData[i].link[j].name.split("|")[1]);
    281                                 }
    282                                 for(var k = 0; k < dragData[i].linked.length; k++) {
    283                                     console.log('dragData[i].linked[k]', dragData[i].linked[k]);
    284                                     for(let j = 0; j < dragData.length; j++) {
    285                                         if(dragData[i].linked[k].linkedNum == dragData[j].id) {
    286                                             console.log('ID一样了啊');
    287                                             for(let m = 0; m < dragData[j].link.length; m++) {
    288                                                 if(dragData[i].linked[k].name == dragData[j].link[m].name) {
    289                                                     console.log("名字一样了啊");
    290                                                     dragData[j].link[m].dx = dragData[i].inx;
    291                                                     dragData[j].link[m].dy = dragData[i].iny;
    292                                                     dragData[j].link[m].mx1 = dragData[j].outx;
    293                                                     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;
    294                                                     dragData[j].link[m].mx2 = dragData[j].outx + (dragData[j].link[m].dx - dragData[j].outx) / 2,
    295                                                     dragData[j].link[m].my2 = dragData[j].outy + (dragData[j].link[m].dy - dragData[j].outy) / 2
    296                                                 }
    297                                             }
    298                                         }
    299                                     }
    300                                 }
    301                                 reload();
    302                                 if(dragData[i].link.length > 0) {
    303                                     for(var j = 0; j < dragData[i].link.length; j++) {
    304                                         dragData[i].link[j].mx1 = dragData[i].outx;
    305                                         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;
    306                                         dragData[i].link[j].mx2 = dragData[i].outx + (dragData[i].link[j].dx - dragData[i].outx) / 2,
    307                                             dragData[i].link[j].my2 = dragData[i].outy + (dragData[i].link[j].dy - dragData[i].outy) / 2
    308                                     }
    309                                 }
    310                                 reload();
    311                             }
    312                         }
    313                         console.log(dragData);
    314                         reload();
    315                     }
    316                 })
    317             })
    318             //给创建的新的组件加上mouseup事件
    319             $('#d1 > .drawContent > div').mouseup(function() {
    320                 waitElement = undefined;
    321                 console.log(waitElement);
    322             })
    323             //容器的mouseup事件
    324             $('#d1').mouseup(function(e) {
    325                 console.log('我抬起了');
    326                 waitElement = undefined;
    327                 if(waitElement) {
    328                     waitElement.css({
    329                         top: e.pageY - $('#d1').offset().top,
    330                         left: e.pageX - $('#d1').offset().left
    331                     })
    332                 }
    333             })
    334             //给组件的输出圆圈加入mouseenter事件使组件不能拖拽
    335             $('#d1 > .drawContent').on('mouseenter', 'div>s', function() {
    336                 console.log('进入了输出');
    337                 waitElement = undefined;
    338                 $('svg').unbind('mousemove');
    339             })
    340             //先给组件的输出源加入mousedown事件,先创建连线
    341             $('#d1 > .drawContent').on('mousedown', 'div>s', function(event) {
    342                 event.preventDefault();
    343                 event.stopPropagation();
    344                 //先创建连线的数据
    345                 console.log($(this).parent());
    346                 var parent = $(this).parent();
    347                 var id = parent.data('id');
    348                 console.log('idididid', id);
    349                 for(var i = 0; i < dragData.length; i++) {
    350                     if(dragData[i].id == id) {
    351                         dragData[i].draw = true;
    352                         dragData[i].link.push({
    353                             name: id + parent.attr('class'),
    354                             dx: 0,
    355                             dy: 0,
    356                             mx1: 0,
    357                             my1: 0,
    358                             mx2: 0,
    359                             my2: 0
    360                         });
    361                         console.log('dragData哈哈哈哈', dragData);
    362                         $('body').on('mouseup', function(e) {
    363                             for(var j = 0; j < dragData.length; j++) {
    364                                 if(id == dragData[j].id) {
    365                                     console.log('页面抬起了');
    366                                     dragData[j].draw = false;
    367                                     var $dom=$(e.target).data("drag")?$(e.target):$(e.target).closest("div[data-drag]");
    368                                     if($dom.length){
    369                                         if($dom.data("drag") && $dom[0].dataset.id!=dragData[j].id){//判断是否关联另外模块,非自己
    370                                             $('svg').unbind('mousemove');
    371                                             var name=dragData[j].link[dragData[j].link.length - 1].name + "|" + $dom[0].dataset.id + $dom[0].className;
    372                                             var isontbe=0;//判断是否存在关联
    373                                             for(let i = 0; i < dragData.length; i++){
    374                                                 if($dom[0].dataset.id == dragData[i].id){
    375                                                     for(let c = 0; c < dragData[i].linked.length; c++){
    376                                                         if(name==dragData[i].linked[c].name){
    377                                                             isontbe=1
    378                                                         }
    379                                                     }
    380                                                     if(!isontbe){//不存在时候存入linked
    381                                                         dragData[i].linked.push({
    382                                                             name: name,
    383                                                             linkedNum:parseFloat(name)
    384                                                        })
    385                                                         dragData[i].arrow = "inline-block";
    386                                                     }
    387                                                 }
    388                                             }
    389                                             if(!isontbe){//不存在时候生成link数据
    390                                                 dragData[j].link[dragData[j].link.length - 1].name = name;
    391                                                 dragData[j].link[dragData[j].link.length - 1].dx = Number($dom[0].dataset.inx);
    392                                                 dragData[j].link[dragData[j].link.length - 1].dy = Number($dom[0].dataset.iny);
    393                                                }else{
    394                                                    dragData[j].link.splice(dragData[j].link.length-1,1);
    395                                                }
    396                                         } else {
    397                                             dragData[j].link.splice(dragData[j].link.length - 1, 1);
    398                                         }
    399                                     } else {
    400                                         dragData[j].link.splice(dragData[j].link.length - 1, 1);
    401                                     }
    402                                     $('svg').unbind('mousemove');
    403                                     reload();
    404                                 }
    405                             }
    406                             $('body').unbind('mouseup');
    407                         })
    408                     }
    409                 }
    410             })
    411             //给输出圆圈添加mouseup事件
    412             $('#d1 > .drawContent').on('mouseup', 'div>s', function() {
    413                 var parent = $(this).parent();
    414                 for(var i = 0; i < dragData.length; i++) {
    415                     if(parent.data('id') == dragData[i].id) {
    416                         dragData[i].draw = false;
    417                         console.log(dragData[i]);
    418                     }
    419                 }
    420             })
    421             //给组件的输出源加入mouseleave事件使组件继续能够拖拽
    422             $('#d1 > .drawContent').on('mouseleave', 'div>s', function(event) {
    423                 event.preventDefault();
    424                 event.stopPropagation();
    425                 console.log('离开了了输出');
    426                 console.log($(this).parent());
    427                 waitElement = $(this).parent();
    428                 var id = waitElement.data('id')
    429                 //给svg加mousemove事件
    430                 for(var i = 0; i < dragData.length; i++) {
    431                     if(id == dragData[i].id) {
    432                         if(dragData[i].draw == true) {
    433                             $('svg').mousemove(function(e) {
    434                                 for(var i = 0; i < dragData.length; i++) {
    435                                     if(id == dragData[i].id) {
    436                                         console.log(dragData[i]);
    437                                         if(dragData[i].link[dragData[i].link.length - 1]) {
    438                                             dragData[i].link[dragData[i].link.length - 1].dx = e.offsetX;
    439                                             dragData[i].link[dragData[i].link.length - 1].dy = e.offsetY;
    440                                             dragData[i].link[dragData[i].link.length - 1].mx1 = dragData[i].outx;
    441                                             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;
    442                                             dragData[i].link[dragData[i].link.length - 1].mx2 = dragData[i].outx + (dragData[i].dx - dragData[i].outx) / 2,
    443                                                 dragData[i].link[dragData[i].link.length - 1].my2 = dragData[i].outy + (dragData[i].dy - dragData[i].outy) / 2
    444                                         }
    445                                         //////////////////////////////////////////////
    446                                         dragData[i].dx = e.offsetX;
    447                                         dragData[i].dy = e.offsetY;
    448                                         dragData[i].mx1 = dragData[i].outx;
    449                                         if(dragData[i].dy > dragData[i].outy) {
    450                                             dragData[i].my1 = dragData[i].outy + (dragData[i].dy - dragData[i].outy) / 4;
    451                                         } else {
    452                                             dragData[i].my1 = dragData[i].outy - (dragData[i].dy - dragData[i].outy) / 4;
    453                                         }
    454                                         dragData[i].mx2 = dragData[i].outx + (dragData[i].dx - dragData[i].outx) / 2
    455                                         dragData[i].my2 = dragData[i].outy + (dragData[i].dy - dragData[i].outy) / 2
    456                                     }
    457                                 }
    458                                 reload();
    459                                 console.log(2333);
    460                             })
    461                         } else {
    462                             $('svg').unbind('mousemove');
    463                         }
    464 
    465                     }
    466                 }
    467             })
    468             //给svg添加mouseup事件
    469             $('svg').mouseup(function(e) {
    470                 console.log(e.target);
    471                 $('svg').unbind('mousemove');
    472                 for(var i = 0; i < dragData.length; i++) {
    473                     dragData[i].draw = false;
    474                 }
    475                 console.log('起来了');
    476             })
    477         </script>
    478     </body>
    479 
    480 </html>

    转至http://blog.csdn.net/zhaoxiang66/article/details/78341632

    根据大神的思路修改了bug,加强了功能,优化了代码分量

  • 相关阅读:
    最全的常用正则表达式大全
    服务器调用JS
    ASP-----分页功能的实现
    流操作text文件------读取、保存文档
    linq to sql 增删改查
    数据库的高级应用
    SQL---------表的约束
    面向对象--继承练习
    Winform---文件夹操作
    面向对象--里氏转换练习
  • 原文地址:https://www.cnblogs.com/zjhr/p/8514077.html
Copyright © 2011-2022 走看看