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

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

这是我的JSFIDLE：

---

编辑：Pruthvi Bharadwaj明白了：

因为端点的父节点不同，所以无法连接端点。将整个代码放在容器“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>

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

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

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

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

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

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

---

这可能就是为什么这个错误正在发生，但实际上没有帮助。这会使端点彼此连接，但不会随长方体一起移动。看：明白了，在我的问题中添加了最后一个JSFIDLE

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