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

绝地灬酷狼 2021-09-16 07:12 418阅读 0赞

上代码

直接用看效果，学习一下

<!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">
            
            <svg>
                
            </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>