4

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:

enter image description here

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.

neontapir
  • 4,698
  • 3
  • 37
  • 52
Pirozek
  • 1,250
  • 4
  • 16
  • 25
  • But i posted my code, there is nothing else on the page, just jquery, jquery ui, js plumb, 2 divs and one piece of js with dialog create and jsplumb connect :) – Pirozek Aug 31 '11 at 09:01

1 Answers1

3

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!

Willem
  • 5,364
  • 2
  • 23
  • 44
  • Thanks very much mate! Very nice demo, I am tryin to figure out how to repaint lines when drag... – Pirozek Aug 31 '11 at 18:28
  • Veeery nice! I found this method too, but it works only when one of the divs is dialog. When I try to dialogize both of them I got "Uncaught TypeError: Cannot read property 'left' of null". I found a workaround, but I dont like it. I create overlay div that moves and resizes like dialog and I attach plumb on that div. It works, but I dont like it :) – Pirozek Sep 01 '11 at 08:39
  • http://jsfiddle.net/p8XUm/7/ the source element for jsPlumb has to have an id attribute – Willem Sep 01 '11 at 09:51
  • You are a lifesaver :) Just a question, why is it working when only one dialog has that ID? – Pirozek Sep 01 '11 at 09:54
  • jsPlumb seems to need an id for the source element only. if you want to draw a line from the other dialog (as source) to another element that dialog also needs an id. – Willem Sep 01 '11 at 10:34