关于拖放：在 jsPlumb jQuery 中以编程方式”拾取”元素之间的连接


Programatically "picking up" connections between elements in jsPlumb jQuery

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

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

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

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

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

问题：
当实际上用户单击并拖动连接器时，您如何"欺骗" jsPlumb 有人单击并拖动端点？

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

我看到你的问题很老了，但我解决了它

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$(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/

相关讨论