JsPlumb流程图没有自连接

Posted 2023-05-07

【中文标题】JsPlumb流程图没有自连接

【英文标题】：JsPlumb flowchart no self-connections

【发布时间】：2014-06-03 08:26:45

【问题描述】：

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

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

【参考方案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;
    
);

【参考方案2】：

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

防止环回连接

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

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

【参考方案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);
            
        );

【讨论】：

事件名称不同-jsplumbtoolkit.com/doc/events.html#evt-connection