jsPlumb：如何建立条件连接答案

【问题标题】：jsPlumb: How to make conditional connectionsjsPlumb：如何建立条件连接
【发布时间】：2020-10-06 05:37:09
【问题描述】：

我正在尝试根据规则在节点之间创建连接，例如：

“API 请求”端点无法连接到除“Initiate Call”之外的任何其他节点。
“失败”端点无法连接到“播放音频” 等等……

这是我的端点定义代码：

let addEndpoints = function(toId, sourceAnchors, targetAnchors) {
    console.log(toId, sourceAnchors, targetAnchors);
    for (var i = 0; i < sourceAnchors.length; i++) {
      var sourceUUID = toId + sourceAnchors[i];
      instance.addEndpoint(toId, sourceEndpoint, {
        anchor: sourceAnchors[i],
        uuid: sourceUUID
      });
    }
    for (var j = 0; j < targetAnchors.length; j++) {
      var targetUUID = toId + targetAnchors[j];
      instance.addEndpoint(toId, targetEndpoint, {
        anchor: targetAnchors[j],
        // anchor: 'Continuous',
        uuid: targetUUID
      });
    }
  };

有人可以帮忙吗？

【问题讨论】：

标签： javascript jquery vue.js jsplumb

【解决方案1】：

尝试为此使用beforeDrop 拦截器：

https://docs.jsplumbtoolkit.com/community-2.x/current/articles/events-community.html#evt-beforedrop

您可以在此处查看它的使用情况（不完全是您想要的使用方式，它会在此演示中弹出确认）：

https://jsplumbtoolkit.com/community/demonstration/draggableConnectors

尝试将蓝色端点之一拖动到其他蓝色端点之一。

【讨论】：

感谢您的回复，如何在我的案例中实现相同的想法，因为您看到基于 for 循环创建的端点具有递增值
端点的创建方式不应该对你如何编写 beforeDrop 拦截器有很大的影响。拦截器的参数包括被拖动的连接和它被丢弃的端点。

【解决方案2】：

经过大量搜索后，我想出了如何访问端点 uuid，但作为上面的答案必须像这样在beforeDrop拦截器中调用：

    instance.bind("beforeDrop", function(info) {
      ...
    });

当一个新的或现有的连接被删除时会触发此事件，所以现在info 包含我们需要访问的内容，要获取源端点，命令将如下所示： info.connection.endpoints[0].getUuid() 并获取目标端点： info.dropEndpoint.getUuid().

现在完整的条件将是这样的：

 if (info.connection.endpoints[0].getUuid().includes("start") &&
  info.dropEndpoint.getUuid().includes("playaudio")) {
 instance.deleteConnection(connInfo.connection)
  } else {
   init(info.connection);
   }

【讨论】：