jsPlumb：拖动新连接应删除现有连接

Question

使用jsPlumb，我成功地进行了以下设置：

• 有多个节点与特殊类型流程图中的节点类似。

先举个小例子：http://fiddle.darkspot.ch/ivr/flowchart/ivrplumb.html （经过一个小时的尝试，不幸的是我没有让它在JSFIDLE上运行——所以我自己主持了它）

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

我尝试了不同的方法：

• 在每个出口气泡上都有一个点击监听器（指向jsPlumb文档的链接）。不起作用-

繁殖步骤：

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

我做错了什么？




Answer 1

我在角项目上使用JSPLUMB，我做了这个解决方案：

删除连接（如果存在），然后删除新连接：

    this.jsPlumbInstance.bind('beforeDrop', params => {
  // DELETA CONEXAO CASO JA EXISTE PARA CRIAR OUTRA
  // REMOVE CURRENT CONNECTION IF EXIST TO CREATE NEW
  this.jsPlumbInstance.getConnections().map(connection => {
    if (connection.targetId === params.targetId && connection.sourceId === params.sourceId) {
      this.jsPlumbInstance.deleteConnection(connection);
    }
  });
});

JSPLUMB没有“afterDrop”绑定，所以保留此解决方案。

Answer 2

创建一个全局数组变量，并将每个新连接推送到该数组

    var cons = [];
    instance.bind("connection", function (info) {
        var src = info.sourceId;
        var trgt = info.targetId;
        if (!cons.includes(src+trgt)) {//if not exists
           cons.push(src+trgt);
           cons.push(trgt+src);//(optional) use to prevent adding connection from target to source 
        }
    });

然后在beforeDrop中，检查要创建的新连接是否已存在于阵列中。

    instance.bind('beforeDrop', function(info){
        var createCon = true;
        var src = info.sourceId;
        var trgt = info.targetId;
        var newCon = src + trgt;
        if(cons.includes(newCon)){//if new connection exists do not allow to create new connection
            createCon = false;
        }
        return createCon;
    });

并在移除连接时移除数组中的元素。

    instance.bind("click", function (info) {
        var el = cons.indexOf(info.sourceId + info.targetId);
        var el2 = cons.indexOf(info.targetId + info.sourceId);
        cons.splice(el, 1);
        cons.splice(el2, 1);
        instance.deleteConnection(info);
    });

Answer 3

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

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
});