操作放置在画布上的元素之间的连接

Manipulate connections between elements dropped on canvas

本文关键字：元素 之间 连接 操作      更新时间：2023-09-26

在这里，我已经能够将元素放到画布上，并在它们之间创建连接。但每次我在画布中拖动一个拖放的元素时，锚点都不会随拖动的元素一起移动。相反，当我尝试创建从隔离锚点到另一个元素的连接时，它会立即将自己与其父元素重新定位。这是一个问题，每当删除其父元素时，我也想删除锚点/连接。

<!doctype html>
<html>
<head>
    <script src="../lib/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="../lib/jquery-ui.min.js"></script>
    <script src="../lib/jquery.jsPlumb-1.6.4-min.js"></script>
    <style>
        .chevron-toolbox{
            position: absolute;
            width: 72px;
            height: 80px;
            background-color: powderblue;
            background-image: url("../dist/img/bigdot.png");
            border: solid 3px red;
        }
        #dropArea{
            cursor: pointer;
            border: solid 1px gray;
            width: 800px;
            margin-left: 80px;
            height: 400px;
            position: relative;
            overflow-x: scroll;
            overflow-y: scroll;
        }
        .chevron {
            position:absolute;
            cursor:pointer;
            width: 72px;
            height: 80px;
            background-color:  powderblue;
            background-image: url("../dist/img/bigdot.png");
        }
    </style>
</head>
<body>
    <div class="chevron-toolbox" id="cId">
    </div>
    <div id="dropArea">
    </div>
    <button id="go">Double Click Me</button>
    <script>
        jsPlumb.ready(function(e)
        {
            jsPlumb.setContainer($('#dropArea'));
            $(".chevron-toolbox").draggable
            ({
                helper : 'clone',
                cursor : 'pointer',
                tolerance : 'fit',
                revert : true
            });
            $("#dropArea").droppable
            ({
                accept : '.chevron-toolbox',
                containment : 'dropArea',
                drop : function (e, ui) {
                    droppedElement = ui.helper.clone();
                    ui.helper.remove();
                    $(droppedElement).removeAttr("class");
                    jsPlumb.repaint(ui.helper);
                    $(droppedElement).addClass("chevron");
                    $(droppedElement).draggable({containment: "dropArea"});
                    $(droppedElement).appendTo('#dropArea');
                    setId(droppedElement);
                    var droppedId = $(droppedElement).attr('id');
                    var common = {
                        isSource:true,
                        isTarget:true,
                        connector: ["Flowchart"],
                    };
                    jsPlumb.addEndpoint(droppedId, {
                        anchors:["Right"]
                    }, common);
                    jsPlumb.addEndpoint(droppedId, {
                        anchors:["Left"]
                    }, common);
                    alert(droppedId);
                    //Delete an element on double click
                    var dataToPass = {msg: "Confirm deletion of Item"};
                    $(droppedElement).dblclick(dataToPass, function(event) {
                        alert(event.data.msg);
                        $(this).remove();
                    });

                }
            });
            //Set a unique ID for each dropped Element
            var indexer = 0;
            function setId(element){
                indexer++;
                element.attr("id",indexer);
            }
        });
    </script>
</body>
</html>

为了正确操作连接，您可以在jsPlumb中使用connect方法，在所需的点放置锚。

jsPlumb.connect({
  source:'window2',
  target:'window3',
  paintStyle:{lineWidth:8, strokeStyle:'rgb(189,11,11    )'},
  anchors:["Bottom", "Top"],
  endpoint:"Rectangle"
});

这只是一个例子。当访问有关这些连接的详细信息并删除元素

旁边的连接时，在实现中遵循此模式将非常有用
相关文章：