以编程方式“拾取” jsPlumb jQuery 中元素之间的连接

Question

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

例如在鼠标按下时，从它的一个端点释放连接器并使其被拖动并能够重新应用到端点或目标的能力.在使用流程图连接器或连接器共享端点的一般情况下，用户如何决定移动哪个连接器？您总是选择最上面的一个，或按顺序指定的一个。

我的意思是在动态图表用户界面中的用例，最终用户将在元素之间从端点拖放到端点的连接。如果多个连接器共享一个端点，则用户无法选择移动哪个连接器。

为了解决这个问题，我想让连接器可以通过任何除了端点来拖动，从而使其从目标端点释放并被用户拖动。

示例：http://jsplumbtoolkit.com/jquery/flowchartConnectorsDemo.html
尝试将几个“拖动”端点拖动到“放下”端点。如果您现在单击并拖动“drop”端点，您将拾取一个预定的连接器（可能不是您想要的）。是否可以改为通过拖动连接器的中间（黄线上的任何位置）来拾取它？

问题：
你怎么能“欺骗” jsPlumb 有人点击并拖动了一个端点，而实际上用户点击并拖动了连接器？

注意：我不想删除连接。我知道如何编程。我想触发一个连接器被它的端点拾取和拖动，而不是直接单击端点。

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/