JsPlumb 端点覆盖答案

【问题标题】：JsPlumb endpoints overlayJsPlumb 端点覆盖
【发布时间】：2014-01-29 07:20:05
【问题描述】：

假设我有一个有 4 个端点的元素，每个端点都有一个连接。我需要在端点标签中显示所有连接并通过单击它的名称来删除任何连接。 jsPlumb 是否具备这种能力？或者我该怎么做？

sourceEndpoint = jsPlumb.addEndpoint($(requirementSelector), {overlays: removeLabel, maxConnections: -1, endpoint: ["Dot", { radius: 4}], anchors: ["RightMiddle", "LeftMiddle"]});
    targetEndpoint = jsPlumb.addEndpoint($(solutionSelector), {overlays: removeLabel,maxConnections: -1, endpoint: ["Dot", { radius: 4}], anchors: ["RightMiddle", "LeftMiddle"]});

    jsPlumb.connect({
        source: sourceEndpoint, 
        target: targetEndpoint 
    });

    targetEndpoint.bind("click", function(endpoint) {
      var elementEndpoints = jsPlumb.selectEndpoints({element: endpoint.elementId});

      var ids="<div style='border: 2px solid black; padding: 5px; background-color: #ffffff'; z-index:10;>";

      elementEndpoints.each(function(ep){
        ids += "<p ng-click='clicked()'>Remove - " + ep.id + "</p>"
      });

      ids += "</div>";

      endpoint.setLabel(ids);
      endpoint.showOverlay();
    });

【问题讨论】：

jsPlumb 有连接标签但没有端点标签。您想通过单击还是双击删除连接？如果是这样，这是可能的。
我可以从元素中获取所有端点。每个端点都有一个连接。现在我需要在端点覆盖（标签）中显示它（假设 4 个连接）并通过点击它删除任何
对不起，我没有得到你，你能把它画出来并发布一个图像。
例如解决方案容器。通过单击标签“删除 - ep42”，我需要删除连接 ep_42
你需要那个标签来删除连接吗？如果是这样，为什么不将某些事件绑定到连接并在触发时将其删除。

标签： javascript jquery angularjs jsplumb

【解决方案1】：

试试这个。每当创建新连接时，绑定一个事件以删除连接：

jsPlumb.bind("jsPlumbConnection", function(ci) {
            ci.connection.bind("click",function(con){
                jsPlumb.detach(con);
            });
        });

让我知道它是否适合你。

【讨论】：

Pruthvi Bharadwaj，谢谢！但你的例子在我的情况下不起作用。一个元素可以有很多端点，用户只能看到最后一个端点（见要求）。这就是为什么我需要一些弹出窗口或标签来显示所有连接的元素并删除选定的。