如何删除jsPlumb连接

I am playing with jsplumb, but I am not able to delete the connection between two divs having only the id of one div.

 


 

If you've multiple connections from or to elements, detaching all connections is maybe not the best solution to delete a connection. There is a (not well documented) function to detach exactly one connection:

jsPlumb.detach(connection, {
    fireEvent: false, //fire a connection detached event?
    forceDetach: false //override any beforeDetach listeners
})

In my example, I want to delete a connection when the connector is clicked:

 jsPlumb.bind('click', function (connection, e) {
     jsPlumb.detach(connection);
 });

 

2017年10月01日57分04秒

 

I found the solution in the documentation (http://jsplumb.org/doc/usage.html)

jsPlumb.detachAllConnections("elementId");

 

2017年10月01日57分04秒

 

If source div or target div id is already known, then you can delete the connection like this:

var conn = jsPlumb.getConnections({
              //only one of source and target is needed, better if both setted
              source: sourceId,
              target: targetId
            });
if (conn[0]) {
  jsPlumb.detach(conn[0]);
}

You can also use jsPlumb.getAllConnections() to get the array of all connections, and test every connection's sourceId or targetId to get exactly the connection you need;

 

2017年10月01日57分04秒

 

After all the endpoint connections, to and from the element are deleted, you need to detach it as shown in the 3rd line

jsPlumb.detachAllConnections(divID);
jsPlumb.removeAllEndpoints(divID);
jsPlumb.detach(divID); 
divID.remove()

 

2017年10月01日57分04秒

 

Hi you can refer to this: Detach connection jsPlumb

This block of code allows to detach connection if a connection was clicked:

jsPlumb.bind("click", function(conn) {
    jsPlumb.detach(conn);
});

 

2017年10月01日57分04秒

 

This code removes all "wrong" connections in a game I'm developing. I hope it helps

var wrong_connections = new Array(DB_ID, ANOTHER_DB_ID);
var connections = jsPlumb.getConnections();
$.each(connections, function(index, value) { // going through all connections
  var source_id = value.source.attr('id').substring(28);  // I need the ID from DB so I`m getting it from the source element
  for (var a = 0; a < wrong_connections.length; a++) {  
    if (source_id == wrong_connections[a]) {
      jsPlumb.detach(value);
    }
  }
});

 

2017年10月01日57分04秒

 

jsPlumb.deleteConnectionsForElement(elementId)

works. Though it's old I'd like to add that finding out what methods a library has, provided it's self descriptive enough is quite easy.

转载于:https://www.cnblogs.com/ysx215/p/7615684.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值