通过编程“拾取”jsPlumb jQuery中元素之间的连接

Question

当使用jsPlumb连接元素时，我觉得缺少一个相当重要的特性和用例：

例如，在mousedown上，从连接器的一个endpoint释放连接器，使其被拖动并能够重新应用于endpoint或目标。在使用流程图连接器或连接器共享endpoint的一般情况下，用户如何决定移动哪个连接器？您总是选择最上面的一个，或者按订单指定的一个。

我所指的用例是动态绘制用户界面图，其中最终用户将在元素之间拖放从endpoint到endpoint的连接。如果多个连接器共享一个终结点，则用户无法选择要移动哪个连接器。

为了解决这个问题，我希望能够通过除endpoint之外的任何东西拖动连接器，从而使其从目标endpoint释放并被用户拖动。

示例：http://jsplumbtoolkit.com/jquery/flowchartConnectorsDemo.html
尝试拖动多个拖动endpoint以拖放endpoint。如果您现在单击并拖动“删除”终结点，您将获得一个预定的连接器（可能不是您想要的连接器）。有没有可能通过拖动连接器的中间（黄线上的任何地方）来拾取它？

问题：
你如何欺骗jsPlumb，有人点击并拖动endpoint，而实际上用户点击并拖动连接器？

注意：我不想删除连接。我知道如何编程。我想触发连接器被其endpoint拾取和拖动，而不直接单击endpoint。

Answer 1

我知道你的问题很老了，但我解决了

您所需要做的就是触发endpoint.canvas元素上的mousedown事件，这将启动连接器拖动。

当然，开始拖动时，鼠标不会在同一个位置，而且直到mousemove事件发生，拖动才真正开始，所以我在document.mousemove上添加了一些无礼的调整。也许有更好的方法可以做到这一点，但对于其他人来说，这可能是一个很好的起点。

$(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/