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.

  • 相关阅读:
    学习进度笔记4
    学习进度笔记3
    学习进度笔记2
    学习进度笔记1
    《梦断代码》提及文献
    《梦断代码》阅读笔记6
    《梦断代码》阅读笔记5
    需求征集系统开发进度5
    《梦断代码》阅读笔记4
    spark filter
  • 原文地址:https://www.cnblogs.com/ysx215/p/7615684.html
Copyright © 2011-2022 走看看