Organizational Research By

Surprising Reserch Topic

how to draw a line between draggable and droppable


how to draw a line between draggable and droppable  using -'jquery,html,jquery-ui,drawing,svg'

I'm using the excellent JQuery UI to do a "mapping" so the user can "map"
persons from one program to persons from other program.

using this simple 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));
    });
});


I get to this:



what I really wanted was (if possible) create a line between
Elsa and Kjell so it makes the connection between them clear.

I can always do it with numbers inside the boxes, but I really
wanted to know how to do this using the lines.

Thanks.
    
asked Sep 21, 2015 by rajeevr642
0 votes
8 views



Related Hot Questions



Government Jobs Opening


...