Javascript jsPlumb:如何建立条件连接

Javascript jsPlumb:如何建立条件连接,javascript,jquery,vue.js,jsplumb,Javascript,Jquery,Vue.js,Jsplumb,我正在尝试根据规则在节点之间创建连接,例如: “API请求”端点无法连接到除“发起调用”之外的任何其他节点 “失败”终结点无法连接到“播放音频” 等等 这是我的端点定义代码: let addEndpoints = function(toId, sourceAnchors, targetAnchors) { console.log(toId, sourceAnchors, targetAnchors); for (var i = 0; i < sourceAnchors.l

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

  • “API请求”端点无法连接到除“发起调用”之外的任何其他节点
  • “失败”终结点无法连接到“播放音频” 等等
  • 这是我的端点定义代码:

    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
          });
        }
      };
    
    let addEndpoints=函数(toId、源锚点、目标锚点){
    控制台日志(toId、源锚、目标锚);
    对于(var i=0;i

    任何人都可以提供帮助?

    尝试使用
    beforeDrop
    拦截器:

    您可以在此处看到它正在使用中(不完全是您想要如何使用它,它会在本演示中弹出一条确认信息):


    尝试将一个蓝色端点拖动到另一个蓝色端点。

    尝试使用
    beforeDrop
    拦截器执行以下操作:

    您可以在此处看到它正在使用中(不完全是您想要如何使用它,它会在本演示中弹出一条确认信息):


    尝试将一个蓝色端点拖动到另一个蓝色端点。

    经过大量搜索,我找到了如何访问端点UUID,但作为 上面的答案必须在投递之前在
    拦截器中调用,如下所示:

        instance.bind("beforeDrop", function(info) {
          ...
        });
    
     if (info.connection.endpoints[0].getUuid().includes("start") &&
      info.dropEndpoint.getUuid().includes("playaudio")) {
     instance.deleteConnection(connInfo.connection)
      } else {
       init(info.connection);
       }
    
    此事件在新连接或现有连接断开时触发,因此现在
    info
    包含我们需要访问的内容,要获取源端点,命令如下:
    info.connection.endpoints[0].getUuid()
    要获取目标端点,请执行以下操作:
    info.dropEndpoint.getUuid()

    现在,完整条件如下所示:

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

    在进行了大量搜索之后,我发现了如何访问端点UUID,但作为 上面的答案必须在投递之前在
    拦截器中调用,如下所示:

        instance.bind("beforeDrop", function(info) {
          ...
        });
    
     if (info.connection.endpoints[0].getUuid().includes("start") &&
      info.dropEndpoint.getUuid().includes("playaudio")) {
     instance.deleteConnection(connInfo.connection)
      } else {
       init(info.connection);
       }
    
    此事件在新连接或现有连接断开时触发,因此现在
    info
    包含我们需要访问的内容,要获取源端点,命令如下:
    info.connection.endpoints[0].getUuid()
    要获取目标端点,请执行以下操作:
    info.dropEndpoint.getUuid()

    现在,完整条件如下所示:

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

    感谢您的回复,在我的例子中如何实现相同的想法,正如您看到的那样,基于for循环创建的端点具有递增的值。创建端点的方式不应该对如何编写beforeDrop拦截器有很大影响。拦截器的参数包括正在拖动的连接和正在删除连接的端点。感谢您的回复,如何在我的案例中实现相同的想法,正如您看到的那样,基于for循环创建的端点的值是递增的,创建端点的方式不应该对如何编写beforeDrop拦截器有很大影响。拦截器的参数包括正在拖动的连接和正在删除该连接的端点。