jsPlumb: How do I select a specific connector

问题

I can't seem to figure out how to select a specific jsPlumb connector. I know that I can select all the connectors related to source or target, but frequently I will have multiple connectors going between the same source and target so I don't see a way to be able to select a specific connector in that case.

My specific use case is as follows:

If a user clicks a connector, they are given a dialog that allows them edit the connection. (ie. set the label name, delete the connection). Right now if they set the label or delete a connection I am forced to detach everything in my diagram and then repaint everything. This method works, it would just seem cleaner to be able to just detach the one connection that was modified or just change its label.

ideas?

回答1:

As far as I understood your question, you want to detach connection when user clicks on it.

What you need to do:

Register "click" listener on the connection with jsPlumb events
Once click event is triggered use jsPlumb.detach on the connection that triggered event, this will remove it, while leaving endpoints untouched.

Here is a code sample that I used:

        //connection was established let's add listener
        jsPlumb.bind("jsPlumbConnection", function(info) {

            //get connection from event info
            var connection = info.connection;

            //add on click event
            connection.bind("click", function(conn) {
                jsPlumb.detach(conn);
            });
        });

Original demo - Updated Demo

回答2:

if(action == "delete"){
        jsPlumb.remove(object_selected, {
            fireEvent: false, 
            forceDetach: false 
        })

or this:

 $(document).keyup(function(e){
        if(e.keyCode == 46){
            if(connection != null){
                jsPlumb.detach(connection);
                connection = null;
            }

            if(object_selected != null){
                jsPlumb.remove(object_selected);
                object_selected = null;
            }
        }

    })

来源：https://stackoverflow.com/questions/15346942/jsplumb-how-do-i-select-a-specific-connector

标签

jsplumb