Question

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

在特殊类型的流程图中，有多个节点就像节点一样。
每个节点都有一个目标，可以将连接放在上面。
每个节点都有零个，一个或多个出口。每个出口都充当jsPlumb源，并且最多允许一个连接。

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

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

我尝试了不同的方法：

在每个退出冒泡上都有click listener（指向jsPlumb文档的链接）。不起作用 - ＆gt;无论我尝试什么，这个事件都不会被解雇。
拥有实例connection listener。我以为我可以从我收到的info对象中获取端点的现有连接。在查看示例时打开控制台，无论有多少连接，您都会看到它始终为1。
限制maxConnections makeSource(...)来电1。这实际上可行，但用户无法拖动另一个连接来替换第一个。

重现的步骤：

将鼠标移动到其中一个橙色方块，单击并拖动连接另一个节点。（连接应该建立）
打开浏览器的javascript控制台
将鼠标移动到同一个方块，然后单击/拖动另一个连接到同一个或另一个目标节点。（第二个连接应该建立。观看控制台打印Number of connections:1。这应该是2这里）

我做错了什么？

Answer 1

在建立新连接之前，检查源是否已有传出连接，如果是，则将其删除。假设退出元素具有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
});

Answer 2

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

<input list="list">

  <datalist id="list">
    <option value="10.24.0">
    <option value="10.24.1">
    <option value="10.24.2">
    <option value="10.24.3">
    <option value="10.25.1">
    <option value="10.27.1">
    <option value="10.28.1">
    <option value="11.0">
    <option value="11.0.1">
  </datalist>

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

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

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

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

Answer 3

我在角度项目上使用了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'绑定，因此请保留此解决方案。

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

3 个答案: