连接jQuery UI的对话框使用JsPlumb

问题描述：

我使用jQuery插件称为jsPlumb线 - http://jsplumb.org/jquery/demo.html，我想我的jQuery UI的对话框与jsPlumb产生的线连接。但我不知道如何去做。连接jQuery UI的对话框使用JsPlumb

我有这个源：

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

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

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

然后我做垂直：

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

其窃听： - d貌似这个http://prntscr.com/2udde

我试图扭转过程中，首先垂直EM，然后使用对话，结果是这里http://prntscr.com/2udef：

enter image description here

下一个我试图下探通过UI创建的div，它不是工作...

接下来我该做什么？我真的需要连接两个页面上的元素与线，当我移动的要素之一，将移动，但我找不到任何比jsPlumb更好。

但我贴我的代码，有没有别的网页上，只是jQuery的，jQuery用户界面，JS铅锤，2周的div与对话一块JS的创建和jsplumb连接:) – Pirozek

答

我已在的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

更新中找到：样品现在工作时，移动对话框！

非常感谢队友！非常漂亮的演示，我试着找出如何拖动时重画线... – Pirozek

Veeery真好！我也发现了这种方法，但只有当其中一个div是对话框时才起作用。当我尝试将它们对话时，我得到了“Uncaught TypeError：无法读取null的属性'左'。我找到了解决方法，但我不喜欢它。我创建覆盖div，像对话框一样移动和调整大小，然后附加垂直于该div。它的工作原理，但我不喜欢它:) – Pirozek

链接，我的意见 - > http://jsfiddle.net/p8XUm/5/两个对话框不工作:( – Pirozek

连接jQuery UI的对话框使用JsPlumb

相关推荐