JsPlumb流程图没有自连接

Question

我有一个问题，我或多或少地使用 jsPlumb 流程图演示示例，但每个窗口只有一个放置目标，并且可能有一个或多个拖动目标。但是我想禁止自连接，以便可以将连接从任何窗口拖到任何其他窗口，除了它本身。

我在想也许你会使用范围，但这意味着每个窗口都有不同的范围，看起来在顶部。有没有人有一个整洁的解决方案？

Answer 1

感谢他们为我指明正确方向的答案。最后使用了“beforeDrop” 绑定“连接”时，它正在分离窗口的源端点以及连接。

最终的解决方案是：

instance.bind("beforeDrop", function (info) {
// console.log("before drop: " + info.sourceId + ", " + info.targetId);
    if (info.sourceId === info.targetId) { //source and target ID's are same
        console.log("source and target ID's are the same - self connections not allowed.")
        return false;
    } else {
        return true;
    }
});

Answer 2

来自http://www.jsplumb.org/doc/connections.html#draganddrop

防止环回连接

仅在原版 jsPlumb 中，您可以指示 jsPlumb 阻止环回连接，而无需求助于 beforeDrop 拦截器。您可以通过在传递给 makeTarget 方法的参数上设置 allowLoopback:false 来做到这一点：

jsPlumb.makeTarget("foo", {
  allowLoopback:false
});

Answer 3

绑定一个事件以在创建新连接时获得通知。创建连接后，检查连接的源和目标是否相同，如果是，则分离该连接以避免自循环。代码：

jsPlumb.bind("jsPlumbConnection", function(ci) {

            var s=ci.sourceId,c=ci.targetId;

            if( s===c ){ //source and target ID's are same
                jsPlumb.detach(ci.connection);
            }
            else{ // Keep connection if ID's are different (Do nothing)
                // console.log(s+"->"+c);
            }
        });