Question

I am using jQuery plugin called jsPlumb – http://jsplumb.org/jquery/demo.html and I want to connect my jQuery UI Dialogs with lines generated by jsPlumb. But I cant figure out way to do it.

I have this source:

<div id="okenko1">Tuhle neco je</div>
<div id="okenko2">Tuhle je neco jineho</div>

When I create dialog from this divs with jQuery UI

$("#okenko1").dialog()...

And then I do plumb:

jsPlumb.connect({source: $("#okenko1"), target: $("#okenko2")});

Its bugged 😀 Looks like this http://prntscr.com/2udde

I tried to reverse the process, first plumb em and then use dialog, result is here http://prntscr.com/2udef:

Next I tried to plumb divs created by UI, it isnt working…

What can I do next? I really need to connect two elements on page with line, that will move when I move one of the elements, but I cant find anything better than jsPlumb.

Answer 1

I have made a small sample in jsfiddle: http://jsfiddle.net/p8XUm/4/

html:

<span id="okenko1">Tuhle neco je</span>
<span id="okenko2">Tuhle je neco jineho</span>

javascript:

var d = $("#okenko1").dialog({drag: function(event, ui){
    jsPlumb.repaint(d);
}}).parent('.ui-dialog');
jsPlumb.connect({source: $("#okenko2"), target: d});

you should use the parent dialog element as plumb endpoint, not the div itself.
d = $("#okenko1").parent(".ui-dialog")

More info about draggable endpoints can be found in the documentation

update: sample now works when dialog is moved!