如何限制在 JS-Plumb 的同一 div 中建立连接？答案

【问题标题】：How to restrict establishing the connection in same div in JS-Plumb?如何限制在 JS-Plumb 的同一 div 中建立连接？
【发布时间】：2013-02-23 18:25:54
【问题描述】：

这是我的Demo in JS Fiddle

HTML

<div id="a" class="a window" style="width: 100px; height: 100px; border: solid 1px">
</div>

JQuery

    var a = $("#a");
    var b = $("#b");

    //Setting up drop options
    var targetDropOptions = {
        activeClass: 'dragActive'
    };

    //Setting up a Target endPoint
    var targetColor = "#316b31";
    var targetEndpoint = {
        anchor: "TopCenter",
        endpoint: ["Dot", { radius: 8}], 
        paintStyle: { fillStyle: targetColor },
        isSource: true,
        scope: "green dot",
        connectorStyle: { strokeStyle: targetColor, lineWidth: 8 },
        connector: ["Flowchart", { curviness: 63}],
        maxConnections: -1,
        isTarget: true,
        dropOptions: targetDropOptions 
    };

    //Setting up a Source endPoint
    var sourceColor = "#ff9696";
    var sourceEndpoint = {
        anchor: "BottomCenter",
        endpoint: ["Dot", { radius: 8}],
        paintStyle: { fillStyle: sourceColor },
        isSource: true,
        scope: "green dot",
        connectorStyle: { strokeStyle: sourceColor, lineWidth: 8 },
        connector: ["Bezier", { curviness: 63}],
        maxConnections: -1,
        isTarget: true,
        dropOptions: targetDropOptions
    };

    jsPlumb.bind("ready", function () {

        //Set up endpoints on the divs
        jsPlumb.addEndpoint($(".window"), targetEndpoint);
        jsPlumb.addEndpoint($(".window"), sourceEndpoint);

        jsPlumb.draggable($(".window"));
        jsPlumb.animate($("#a"), { "left": 50, "top": 100 }, { duration: "slow" });
    });

查询 - 如何在 JS-Plumb 中限制在同一 div 中建立连接？

【问题讨论】：

标签： jquery jsplumb

【解决方案1】：

我想从性能方面来说这是一个更好的方法。您可以在实际创建连接之前决定。

jsPlumb.bind("beforeDrop", function(connection) {
    return connection.sourceId !== connection.targetId;
});

【讨论】：

简化版：jsPlumb.bind("beforeDrop", function (connection) { return (connection.sourceId != connection.targetId); });

【解决方案2】：

jsPlumb.bind("jsPlumbConnection", function (CurrentConnection) {
        if (CurrentConnection.connection.targetId ==
                                           CurrentConnection.connection.sourceId)
            jsPlumb.detach(CurrentConnection.connection);
        else
            init(CurrentConnection.connection);
    });

【讨论】：