Соединение диалогов пользовательского интерфейса jQuery с линией с помощью JsPlumb

Я использую плагин 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

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

И тогда я делаю отвес:

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

Ошибка :-D Выглядит так: http://prntscr.com/2udde

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

введите здесь описание изображения

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

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


jquery jsplumb jquery-ui jquery-ui-dialog
person Pirozek    schedule 30.08.2011    source источник
comment
Но я разместил свой код, на странице больше ничего нет, просто jquery, jquery ui, js plumb, 2 div и одна часть js с диалоговым окном create и jsplumb connect :)   -  person Pirozek    schedule 31.08.2011

Ответы (1)


arrow_upward
3
arrow_downward

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

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

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

person Willem    schedule 31.08.2011
comment
Спасибо большое дружище! Очень хорошая демонстрация, я пытаюсь понять, как перекрашивать линии при перетаскивании... - person Pirozek; 31.08.2011
comment
Очень приятно! Я тоже нашел этот метод, но он работает только тогда, когда один из div является диалоговым. Когда я пытаюсь диалогизировать их обоих, я получаю Uncaught TypeError: Cannot read property 'left' of null. Я нашел обходной путь, но он мне не нравится. Я создаю оверлейный div, который перемещается и изменяет размер, как диалоговое окно, и прикрепляю отвес к этому div. Работает, но мне не нравится :) - person Pirozek; 01.09.2011
comment
jsfiddle.net/p8XUm/7 исходный элемент для jsPlumb должен иметь атрибут id - person Willem; 01.09.2011
comment
Ты палочка-выручалочка :) Только вопрос, а почему он работает, когда такой ID есть только у одного диалога? - person Pirozek; 01.09.2011
comment
jsPlumb, похоже, нужен идентификатор только для исходного элемента. если вы хотите провести линию из другого диалога (в качестве источника) к другому элементу, этому диалогу также нужен идентификатор. - person Willem; 01.09.2011