使用JsPlumb将jQuery UI对话框与行连接 [英] Connecting jQuery UI dialogs with a line using JsPlumb

问题描述

我正在使用名为jsPlumb的jQuery插件 -

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-对话框'）; 
 jsPlumb.connect（{source：$（＃okenko2），target：d}）; 
  

您应该使用父对话框元素作为铅垂端点，而不是div本身。
d = $（＃okenko1）。parent（。ui-dialog）

有关可拖动端点的更多信息，请参阅文档

更新：示例现在可以在移动对话框时使用！

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.

解决方案

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!

这篇关于使用JsPlumb将jQuery UI对话框与行连接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！