Dinamik jsPlumb bağlantıları doğru bir çizgi çizmiyor

Question

Bir görüntüden başka bir görüntüye bağlantı çizgisi çizmek için jsPlumb kullanıyorum ancak hat doğru değil. Kullanıcı, kaynak görüntü üzerinde sol fare düğmesini basılı tuttuğunda ve iki görüntü arasında bir çizgi çiziyorum ve hedef görüntüde sol fare düğmesini serbest bırakıyor. Doğru görüntü kimliklerini iletiyorum ve çizgi çiziliyor ancak çizgi iki görüntüyü birbirine bağlıyor. İşte

neye benzediğini geçerli:

İşte

kodum:

$(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 }); 
    } 
}); 

iki resim (başlangıç ​​ve bitiş) dinamik olarak oluşturuluyor. Ayrıca jquery ui'yi sürükleyip bırakabilir kullanıyorlar.

Ancak iki kimlik doğru olarak iletiliyor.

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

kaynak id = component_1 ve hedef id = component_2: Burada

hale html 'dir.

Bunu yapmak için daha iyi bir yol varsa .... ben tüm kulaklarım. Teşekkürler!

Answer 1

Örneğinizde neler olup bittiğini anlatmak zor, çünkü tam kodu sağlamıyorsunuz. Ancak, sanırım öğeleri sürüklediğinizi (jQuery sürükle ve bırak yöntemini kullandığınızdan bahsetmiştiniz) ve jsPlumb öğelerinin taşındığını algılamayı başaramadığını tahmin ediyorum.

Bu durumda, jsPlumb öğesinin performans nedenleriyle önbelleklerini önbelleğe aldığından, jsPlumb'a açıkça recalculate the offsets bildirmeniz gerekir.

Benim tahminim böyle bir şey sizin için çalışacak olmasıdır:

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

Üzerime recalculateOffsets aramaya genel olarak sürüklenebilir bileşenlerin ebeveyn ne olması gerektiği elemanı tam olarak emin değilim.