Как нарисовать линию между draggable и droppable?

Я использую отличный пользовательский интерфейс JQuery, чтобы выполнить "сопоставление", чтобы пользователь мог "наметить", лица из одной программы для лиц из другой программы.

используя этот простой JQuery:

$(document).ready(function() {
    $("div .draggable").draggable({
        revert: 'valid',
        snap: false
    });

    $("div .droppable").droppable({
        hoverClass: 'ui-state-hover',
        helper: 'clone',
        cursor: 'move',
        drop: function(event, ui) {
            $(this)
                .addClass('ui-state-highlight')
                .find("img")
                .removeAttr("src")
                .attr("src", "_assets/img/icons/check-user-48x48.png");

            $(this).droppable('disable');

            $(ui.draggable)
                .addClass('ui-state-highlight')
                .find("img")
                .removeAttr("src")
                .attr("src", "_assets/img/icons/check-user-48x48.png");

            $(ui.draggable).draggable('disable');
        }
    });

    $("div .droppable").bind("dblclick", function() {
        $(this)
            .removeClass('ui-state-highlight')
            .find("img")
            .removeAttr("src")
            .attr("src", "_assets/img/icons/user-48x48.png");
        $(this).droppable('enable');

        EnableSource($(this));
    });
});

Я добираюсь до этого:

alt text

то, что я действительно хотел, было (если возможно) создать линию между Elsa и Kjell, поэтому он делает связь между ними понятной.

Я всегда могу делать это с цифрами внутри ящиков, но я действительно хотел знать, как это сделать, используя строки.

Спасибо.

Ответы

Ответ 1

  • обновлено (08.Jul.2013) Обновлено с последними версиями библиотек; html рефакторинг с использованием JsRender;
  • обновлено (29.Sep.2011) Добавлено GIT Repo; очистил код; обновить до последних версий фреймворка;
  • обновлено (03.Mar.2013) Фиксированные ссылки с рабочим примером;

В текущем примере используется:

  • HTML 5 doctype
  • jQuery v.1.10.2
  • jQuery UI v.1.10.3
  • Raphael v.2.0.1
  • JsRender v.1pre35 (необязательно, используется для упрощения HTML)

Источник

Исходный код в Git Репозиторий

Демонстрационный

Демограмма страницы в JSBIN

Работает с FF, IE, Chrome, Safari и Opera.

проверено на:

  • Firefox 6 и 7.. 22
  • IE 8 и 9.. 10
  • Chrome 12+.. 27
  • Safari 5+.. 6
  • Opera 11.51.. 15

чтобы показать вам всех, я просто сделал небольшую демонстрацию моего успеха (сегодня я гордый человек!):

Видео-демонстрация

и небольшое изображение:

alt text

Ответ 2

Я слишком новичок, чтобы опубликовать ссылку, но если вы Google "Библиотека для простого рисования с помощью jQuery", вы можете найти то, что ищете.:)

ссылка здесь