Nasıl sürüklenebilir ve droppable arasında bir çizgi çizmek için?

SORU

11 ŞUBAT 2009, ÇARŞAMBA

Nasıl sürüklenebilir ve droppable arasında bir çizgi çizmek için?

Mükemmel JQuery UI "" kullanıcı "göster"eşleştirme yapmak için kullanıyorum başka bir program kişilik bir programdan kişiler.

bu basit JQuery kullanarak:

$(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));
    });
});

Bu konuyu:

alt text

ben gerçekten ne istediğini(mümkünse) arasında bir hat oluşturmak oldu ElsaveKjellbunlar arasındaki bağlantı açıkça ortaya koyuyor.

Her zaman kutular içinde sayılar ile bunu, ama gerçekten edebilirim nasıl yapılacağını öğrenmek istedim bu satırları kullanarak.

Teşekkürler.

CEVAP

12 ŞUBAT 2009, PERŞEMBE

(08.updated Tem.2013)Kütüphaneler en son sürümleri ile güncellendi; html JsRender kullanarak refactored;
(29.updated Eyl.2011)Ekledi GIT Repo; kod temizlenir; en son çerçeve sürümleri için güncelleme;
(03.updated Mar.2013)Örnek çalışma ile sabit bağlantılar;

Geçerli örnek kullanır: