处理放置在 canvas 上的元素之间的连接

Question

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

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

Answer 1

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

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

这只是一个例子。在访问有关这些连接的详细信息和删除元素旁边的连接时，在您的实现中遵循此模式将很有用

处理放置在 canvas 上的元素之间的连接

Manipulate connections between elements dropped on canvas

javascript

jquery

jsplumb