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

Question

我有两个（或更多）可拖动的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>

现在，在创建端点时，添加选项'container'以指定端点范围：

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

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

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

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

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

在你的情况下，我建议扩展jQuery draggable，如下所示：

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