jQuery Draggable v2.0

by Francis Rodrigues

HTML

<ul id="column">
    <li id="dest-1" class='ui-widget-content'>
        <div id="item-1" class='item'>Item 1</div>
    </li>
    <li id="dest-2" class='ui-widget-content'></li>
    <li id="dest-3" class='ui-widget-content'></li>
    <li id="dest-4" class='ui-widget-content'></li>
</ul>

CSS

ul#column {
    float: left; width: auto;
    border: 1px solid red;
}
.item {
    float: left; margin: 0 auto;
    width: 50px; height: 30px;
    cursor: move; border: 1px solid orange;
}
li.ui-widget-content {
    float: left; margin: 2px;
    width: 100px; min-height: 60px;
    list-style: none; border: 1px solid green;
}
li.ui-widget-content:first-child { margin-left: -40px; }

/* ==========================
 * Styling ui-widget-content
 * ========================== */
ul#column.ui-state-default {}

JavaScript

$(function () {

    $("div.item").draggable({
        connectToSortable: '.ui-widget-content',
        appendTo: "body",
        revert: "invalid"
    });
    $("li.ui-widget-content").droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        accept: ":not(.ui-sortable-helper)",
        zIndex: 999,
        drop: function (event, ui) {
            console.log($(this).attr('id'));
        }
    });

});