jsPlumb：拖动新连接应删除现有连接 [英] jsPlumb: dragging new connection should remove existing one

问题描述

使用jsPlumb，我设法进行了以下设置：

Using jsPlumb, I managed to have the following setup:

• 在特殊类型的流程图中，有多个节点就像节点一样。


• 每个节点都有一个目标可以连接到哪个目标。


• 每个节点都有零个，一个或多个出口。每个出口都充当jsPlumb源，并且最多允许一个连接。

小例子： http://fiddle.darkspot.ch/ivr/flowchart/ivrplumb.html
（之后）一个小时的尝试，我很遗憾没有让它在jsFiddle上运行 - 所以我自己主持它）

Little example first: http://fiddle.darkspot.ch/ivr/flowchart/ivrplumb.html (after an hour of trying, I unfortunately didn't get it to run on jsFiddle - so I host it myself)

我想要实现的是：
如果用户从出口拖动到另一个节点的新连接，应按预期建立。但是应该删除此出口上的所有其他连接。

What I want to achieve is: If the user drags a new connection from an exit to another node, it should be established as intended. But all the other connections being on this exit should be removed.

我尝试了不同的方法：

• 拥有 点击收听者<每个退出泡泡上的/ a>（链接到jsPlumb文档）。不起作用 - >无论我尝试什么，事件永远不会被解雇。


• 有一个实例 connection listener 。我以为我可以从我收到的 info 对象中获取端点的现有连接。查看示例时打开控制台，无论有多少连接，您都会看到 1 。


• 限制 maxConnections 用于 makeSource（...）调用 1 。这实际上可行，但用户无法拖动另一个连接来替换第一个。

• Having a click listener (links to jsPlumb documentation) on each exit bubble. Doesn't work -> the event never gets fired no matter what I tried.
• Having an instance connection listener . I thought I could get the existing connections from the endpoint in the info object I'm receiving. Open the console while looking at the example, and you see it's always 1, no matter how many connections there are.
• Limiting maxConnections for the makeSource(...) call to 1. This would actually work, but the user cannot drag another connection to replace the first.

重现步骤：

1. 将鼠标移动到其中一个橙色方块，单击并拖动连接另一个节点。 （连接应该建立）


2. 打开浏览器的javascript控制台


3. 将鼠标移动到同一个方块，然后单击/拖动另一个连接到同一个或另一个目标节点。 （第二个连接应该建立。观看控制台打印连接数：1 。这应该是 2 这里）

1. Move your mouse to one of the orange squares, click and drag a connection another node. (connection should establish)
2. Open your browser's javascript console
3. Move your mouse to the same square and click/drag another connection to the same or another target node. (second connection should establish. watch the console printing Number of connections:1. This should be 2 here)

我做错了什么？

推荐答案

在建立新连接之前，检查源是否已有传出连接，如果是，则将其删除。假设退出元素有退出 class：

Before a new connection is established check whether the source already has outgoing connections, If so remove it. Assuming that exit elements have exit class:

jsPlumb.bind('beforeDrop', function(ci){ // Before new connection is created
    var src=ci.sourceId;
    var con=jsPlumb.getConnections({source:src}); // Get all source el. connection(s) except the new connection which is being established 
    if(con.length!=0 && $('#'+src).hasClass('exit')){
        for(var i=0;i<con.length;i++){
            jsPlumb.detach(con[i]);
        }
    }
    return true; // true for establishing new connection
});

这篇关于jsPlumb：拖动新连接应删除现有连接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！