使用 JsPlumb 将 jQuery UI 对话框与线条连接起来

Question

我正在使用名为 jsPlumb - http://jsplumb.org/jquery/demo.html 的 jQuery 插件，我想将我的 jQuery UI 对话框与 jsPlumb 生成的行连接起来。但我想不出办法。

我有这个来源：

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

当我使用 jQuery UI 从这个 div 创建对话框时

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

然后我做铅垂：

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

它的错误 :-D 看起来像这样 http://prntscr.com/2udde

我试图扭转这个过程，先探测 em，然后使用对话框，结果在这里http://prntscr.com/2udef：

接下来我尝试探测由 UI 创建的 div，它不起作用...

接下来我能做什么？我真的需要用线连接页面上的两个元素，当我移动其中一个元素时它会移动，但我找不到比 jsPlumb 更好的东西。

Answer 1

我在 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});

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

更多关于可拖动端点的信息可以在documentation中找到

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