使用JsPlumb将jQuery UI对话框与行连接

Question

我正在使用名为jsPlumb的{jQuery插件 - http://jsplumb.org/jquery/demo.html，我希望将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

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