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

Question

这是我在 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 中建立连接？

Answer 1

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

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

Answer 2

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