Как провести грань между перетаскиваемым и сбрасываемым? - PullRequest
Новая
       44

Как провести грань между перетаскиваемым и сбрасываемым?

52 голосов
/ 11 февраля 2009

Я использую отличный пользовательский интерфейс 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

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

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

Спасибо .

Ответы [ 2 ]

64 голосов
/ 13 февраля 2009
  • обновлено (08.07.2013) Обновлено с последними версиями библиотек; html-рефакторинг с использованием JsRender;
  • обновлено (29 сентября 2011 г.) Добавлено GIT Repo; почистил код; обновление до последних версий фреймворка;
  • обновлено (03.03.2013) Исправлены ссылки с рабочим примером;

Текущий пример использования:

Источник

Исходный код в Git Repository

Демо

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

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

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

  • Firefox 6 и 7 .. 22 * ​​1073 *
  • IE 8 и 9 .. 10
  • Chrome 12+ .. 27
  • Safari 5+ .. 6
  • Опера 11,51 .. 15

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

Демонстрация видео

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

alt text

5 голосов
/ 22 мая 2009

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

ссылка здесь

...