JsPlumb端点覆盖

问题描述:

假设我有一个包含4个端点的元素,每个端点都有一个连接。我需要显示端点标签中的所有连接,并通过单击它的名称来删除所有连接。 jsPlumb是否有这种能力?或者我该怎么做? enter image description hereJsPlumb端点覆盖

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(); 
    }); 
+0

jsPlumb具有连接标签但没有端点标签。你想要单击或双击删除连接吗?如果是的话,这是可能的。 – MrNobody

+0

我可以从元素中获取所有端点。每个端点都有一个连接。现在我需要在端点覆盖图(标签)中显示它(假设有4个连接),并通过点击将它删除。 – MaxD

+0

对不起,我没有得到你,你可以想象它并发布图像。 – MrNobody

试试这个。创建新连接时,绑定事件以删除连接:

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

让我知道它是否适用于您。

+0

Pruthvi Bharadwaj,谢谢!但你的例子不适用于我的情况。一个元素可以有很多端点,用户只能看到最后一个端点(请参阅要求)。这就是为什么我需要一些弹出或标签来显示所有连接的元素,并删除选定的。 – MaxD