Connecting jQuery UI dialogs with a line using JsPlumb

问题

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 :-D 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.

回答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!

来源：https://stackoverflow.com/questions/7246859/connecting-jquery-ui-dialogs-with-a-line-using-jsplumb