1

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

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

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

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

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

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

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

4

1 回答 1

3

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

您需要做的就是在 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/

于 2014-05-23T15:42:27.503 回答