Programatically "picking up" connections between elements in jsPlumb jQuery

Question

When elements are connected using jsPlumb there is one rather important feature and use-case that I feel is missing:

The ability to, for example on mousedown, release a connector from one of it's endpoints and cause it to be dragged and able to be reapplied to an endpoint or target. When using flowchart connectors or in general cases where the connectors share endpoints, how can the user decide which connector to move? You always pick up the top one, or one specified by order.

The use-case I mean is in dynamic diagramming user interfaces, where an end user will drag and drop connections from endpoint to endpoint between elements. If several connectors share an endpoint, the user can't choose which connector to move.

To work around this, I want to make it possible to drag the connector by anything except the endpoint, and thus make it release from the target endpoint and become dragged by the user.

Example: http://jsplumbtoolkit.com/jquery/flowchartConnectorsDemo.html
Try to drag several of the "drag" endpoints to "drop" endpoints. If you click and drag the "drop" endpoint now, you pick up a predetermined connector (perhaps not the one you want). Is it possible to instead make it be picked up by, say, dragging the middle of the connector (anywhere on the yellow line)?

Question:
How can you "trick" jsPlumb that someone clicked and dragged an endpoint, when in fact the user clicked and dragged the connector?

Note: I do not want to delete connections. That I know how to program. I want to trigger a connector being picked up and dragged by it's endpoint, without clicking the endpoint directly.

Answer 1

I see that your question is quite old, but I solved it

All you need to do is trigger the mousedown event on the endpoint.canvas element, this will start the connector drag.

Of course the mouse won't be in the same place for the start drag, and the dragging doesn't actually start until the mousemove event, so I added little cheeky adjust on document.mousemove. There probably is a better way to do this, but this might be a good starting point for other people.

$(function() {


jsPlumb.ready(function() {
   var jsp = jsPlumb.getInstance();
    jsp.draggable($("#start"));
    jsp.draggable($("#end"));

    var endpoint = jsp.addEndpoint($("#start"), {
        isSource:true
    });

    jsp.addEndpoint($("#end"), {
        isTarget:true
    }); 

    $("#dragbutton").bind("mousedown", function(e) {

        $(document).bind("mousemove.adjust", function(e) {

            var left = e.offsetX;
            var top = e.offsetY;
            $(endpoint.canvas).css({"left":left, "top":top});
            $(document).unbind("mousemove.adjust");
        });

        $(endpoint.canvas).trigger(e)
    })


})

})

http://jsfiddle.net/VvKZ6/14/