jsplumb 拖放连接将指向错误的元素

Question

我有 2 个（或更多）具有左侧和右侧的可拖动 div。我希望能够将连接从 div 的右侧拖到另一个 div 的左侧。但是，当我尝试这样做时，连接似乎正在工作，直到我断开连接。一旦我删除了连接，它就会将连接吸引到自身。

目前的工作方式：

我希望它如何工作：

我的尝试：

$(".box").draggable();
var startpointOptions = { isSource:true };
var startpoint = jsPlumb.addEndpoint($('.rBox'), startpointOptions);
var endpointOptions = { isTarget:true };
var endpoint = jsPlumb.addEndpoint($('.lBox'), endpointOptions);

这是我的 jsFiddle：http://jsfiddle.net/99RwZ/1/

编辑： Pruthvi Bharadwaj 知道了：http://jsfiddle.net/99RwZ/4/

Answer 1

由于端点的父节点不同，您无法连接端点。将您的整个代码放在容器“div”中：

<div id="containerId">  //container DIV
    <div class='box'>
        <div class='lBox'></div>
    <div class='rBox'></div>
</div>
<div class='box' style="left:500px">
    <div class='lBox'></div>
    <div class='rBox'></div>
</div>

现在在创建端点时添加选项“容器”来指定端点的范围：

var startpointOptions = { isSource:true,container:$('#containerId') };
var endpointOptions = { isTarget:true,container:$('#containerId') };

现在您将能够连接它们，因为端点容器已更改为“containerId”div，而不是它们自己的父 div。

有关 jsPlumb 元素放置位置的更多信息，请访问Document。

如果您希望端点沿着您的 DIV 移动，那么您可以使用

jsPlumb.draggable($('.box'));

在你的情况下，我建议扩展 jQuery 可拖动如下：

$('.box').draggable({
    drag:function(){
        jsPlumb.repaint($('.lBox , .rBox', $(this))); // or simply jsPlumb.repaintEverything();
    }
});