动态jsPlumb连接未绘制准确的行

Question

我正在使用jsPlumb从一个图像到另一个图像绘制连接线，但线条不准确。当用户在源图像上按住鼠标左键并在目标图像上释放鼠标左键时，我在两个图像之间画一条线。我正在传递正确的图像ID并且正在绘制线条，但线条没有连接两个图像。

这是它的样子：

这是我的代码：

$(document).on("mousedown",".component", function (e) {
    if (e.which == 3)
    {
        source = e.target.id;
    }
}).on("mouseup", function (e) {
    if (e.which == 3)
    {
        destination = e.target.id;
        alert("src: " + source + " dest: " + destination);
        jsPlumb.connect({ source:source, target:destination });
    }
});

正在动态创建两个图像（开始和结束）。他们也使用jquery ui draggable和droppable。

但两个ID正确传递。

这是渲染的html：

<div id="circuit-board" style="width:100%; height:400px; background-color:#333; color:white;" class="ui-droppable"><div class="ui-draggable ui-draggable-handle ui-resizable" style="position: relative; width: 100px; height: 100px;"><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: block;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: block;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: block;"></div><img id="component_1" class="component ui-draggable ui-draggable-handle canvas-element jsplumb-endpoint-anchor jsplumb-connected" src="images/components/start.png" width="100" height="100" style="position: relative; width: 100px; height: 100px;"><div class="jsplumb-endpoint jsplumb-endpoint-anchor jsplumb-draggable jsplumb-droppable" style="position: absolute; height: 20px; width: 20px; left: 45px; top: 95px;"><svg style="position:absolute;left:0px;top:0px" width="20" height="20" pointer-events="all" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml"><circle cx="10" cy="10" r="10" version="1.1" xmlns="http://www.w3.org/1999/xhtml" fill="#456" stroke="none" style=""></circle></svg></div><div class="jsplumb-endpoint jsplumb-endpoint-anchor jsplumb-draggable jsplumb-droppable" style="position: absolute; height: 20px; width: 20px; left: 1119px; top: 395px;"><svg style="position:absolute;left:0px;top:0px" width="20" height="20" pointer-events="all" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml"><circle cx="10" cy="10" r="10" version="1.1" xmlns="http://www.w3.org/1999/xhtml" fill="#456" stroke="none" style=""></circle></svg></div><svg style="position:absolute;left:49px;top:99px" width="1086" height="462" pointer-events="none" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml" class="jsplumb-connector"><path d="M 1074 300 C 1064 450 10 150 0 0 " transform="translate(6,6)" pointer-events="visibleStroke" version="1.1" xmlns="http://www.w3.org/1999/xhtml" fill="none" stroke="#456" style="" stroke-width="4"></path></svg></div><div class="ui-draggable ui-draggable-handle ui-resizable" style="position: relative; width: 100px; height: 100px; left: 402px; top: 0px;"><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: block;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: block;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: block;"></div><img id="component_2" class="component ui-draggable ui-draggable-handle canvas-element jsplumb-endpoint-anchor jsplumb-connected" src="images/components/end.png" width="100" height="100" style="position: relative; width: 100px; height: 100px;"></div></div>

源ID = component_1，目标ID = component_2。

如果有更好的方法可以做到这一点......我全都是耳朵。谢谢！

Answer 1

在您的示例中很难说明发生了什么，因为您没有提供完整的代码。但是，我猜你正在拖动元素（你提到你正在使用jQuery拖放），并且jsPlumb无法识别元素已经移动。

如果是这种情况，那么因为jsPlumb因性能原因而缓存元素偏移量，所以你需要明确告诉jsPlumb recalculate the offsets。

我猜这样的事情对你有用：

on("mouseup", function (e) {
  if (e.which == 3)
  {
    jsPlumb.recalculateOffsets($("#circuit-board>div"));
    destination = e.target.id;
    jsPlumb.connect({ source:source, target:destination });
  }
});

我不确定要在哪个元素上调用recalculateOffsets，一般来说它应该是可拖动组件的父元素。