Sortable -> Droppable, Draggable -> Sortable

by Ronny

HTML

<ul id="list">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

<div id="drop">
    <ul id="hidden">
        <li>uno</li>
        <li>dos</li>
        <li>tres</li>
    </ul>
</div>

CSS

li {padding: 1em; border: 1px solid #777; background: #ddd;}

#drop {margin: 2em; font-size: x-small; border: 3px solid #BADA55; padding: 1em;}

#drop.canDrop {background: #fafafa; border-color: hotpink;}
#list .out {display: none !important;}

JavaScript

/* Sortable*/
$('#list').sortable({
    helper: 'clone'
});

/* Connect Draggable to Sortable */
var dragSettings = {
    connectToSortable: '#list',
    revert: 'invalid'
};
$("#hidden li").draggable(dragSettings);

$('#drop').droppable({
    accept: '#list li',
    hoverClass: 'canDrop',
    drop: function(event, ui) {
        console.log('dropped!', ui.draggable);
        var original = $(ui.draggable).hide();

        setTimeout(function() {
            original.css({
                position: 'static',
                top: 'auto',
                left: 'auto'
            }).show().prependTo('#hidden');
        }, 0);

        $(original).draggable(dragSettings);
    }
});