動的なjsPlumb接続で正確な線が描画されない

Question

jsPlumbを使用して1つのイメージから別のイメージへの接続線を描画していますが、線が正確ではありません。私は、ユーザーがソースイメージ上でマウスの左ボタンを保持し、デスティネーションイメージ上でマウスの左ボタンを放すと、2つのイメージの間に線を描画しています。正しい画像IDを渡していて、線が描画されていますが、線が2つの画像を接続していません。

$(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を使用しています。

しかし、2つのIDは正しく渡されています。

<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：ここ

は、レンダリングされたHTMLです。

これを実行するより良い方法がある場合は....私はすべての耳です。ありがとう！

Answer 1

完全なコードを提供していないので、何が起こっているのかをあなたの例で伝えるのは難しいです。しかし、私は要素をドラッグしていることを推測しています（jQueryドラッグアンドドロップを使用していると言いました）、jsPlumbは要素が移動したことを認識できません。

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を呼び出すために、一般的に、それはドラッグ可能なコンポーネントの親がどうあるべきかの要素上に正確かどうか分かりません。