zoukankan      html  css  js  c++  java
  • 如何删除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.

  • 相关阅读:
    HashMap源码分析
    ArrayList、LinkedList和Vector源码分析
    java序列化
    Python Web自动化测试入门与实战,从入门到入行
    Chrome 自带截图工具
    【转】chrome DEvTools 使用,进行定位元素
    偷懒大法好,用 selenium 做 web 端自动化测试
    Python代码覆盖率分析工具Coverage
    Jmeter分布式压力测试
    通过dockerfile制作镜像
  • 原文地址:https://www.cnblogs.com/ysx215/p/7615684.html
Copyright © 2011-2022 走看看