JQuery Multi drap & drop

JQuery Multi drap & drop

by marson parulian

HTML

<ul>
    <li class="droppable"><span>Sydney</span> </li>
    <li class="droppable"><span>Brisbane</span>

    </li>
    <li class="droppable"><span>Melbourne</span>

    </li>
</ul>
<ul class="people-list" id="selectable">
    <li>
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQI2M2fayNNEG2J4XWyISvBAkqMXICAJA6BsKng_c74IHhViMquX173rMBD" class="img-polaroid" />
    </li>
    <li>
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTTpcBv9XoSOS4to4kO0JxWyztP7N-DDN6UmdDJrWgZ83mcvr3BtoY60pmD" class="img-polaroid" />
    </li>
    <li>
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSe1gBNANHTNHRlMBx2YVA3BzytZEXS26meJWQzwbtF4wZ2wo_wiW_FLhk1" class="img-polaroid" />
    </li>
</ul>

CSS

.img-polaroid {
    width:40px;
}
#selectable {
    position:relative
}
.ui-selected {
    border: 2px solid #444
}

JavaScript

$(function () {
    var selectedClass = "ui-selected";
    $(".img-polaroid").draggable({
        start: function (e, ui) {
            $(this).addClass(selectedClass);
        },
        stop: function (e, ui) {
            $("." + selectedClass).css({
                top: 0,
                left: 0
            });
        },
        drag: function (e, ui) {
            $("." + selectedClass).css({
                top: ui.position.top,
                left: ui.position.left
            });
        },
        containment: "document",
        helper: 'original', // use of 'clone' only return the element dragged by pointer
        opacity: 0.70,
        zIndex: 10000
    }).click(function () {
        $(this).toggleClass(selectedClass);
    });
    $(".droppable").droppable({
        hoverClass: "ui-state-hover",
        tolerance: "pointer",
        drop: function (event, ui) {
            console.log("ajax request");
        }
    });
});