Соединение диалоговых окон jQuery UI со строкой с использованием JsPlumb - PullRequest
Новая
       29

Соединение диалоговых окон jQuery UI со строкой с использованием JsPlumb

4 голосов
/ 30 августа 2011

Я использую плагин jQuery с именем jsPlumb - http://jsplumb.org/jquery/demo.html, и я хочу соединить мои диалоги пользовательского интерфейса jQuery со строками, сгенерированными 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

Я попытался отменить процесс, сначала подключить их, а затем использовать диалог, результат здесь http://prntscr.com/2udef:

enter image description here

Далее я попытался установить div, созданный пользовательским интерфейсом, он не работает ...

Что я могу сделать дальше?Мне действительно нужно соединить два элемента на странице со строкой, которые будут перемещаться при перемещении одного из элементов, но я не могу найти ничего лучше, чем jsPlumb.

1 Ответ

3 голосов
/ 31 августа 2011

Я сделал небольшой образец в 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")

Более подробную информацию о перетаскиваемых конечных точках можно найти в документации

обновление: пример теперь работает при перемещении диалога!

...