Draggable Sortable

Demo

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css">
<div class="demo">
    <ul style="float: left; min-width: 15em;">
        <li class="ui-state-highlight draggable">Drag me down.</li>
        <li class="ui-state-highlight draggable">Drag me down.</li>
        <li class="ui-state-highlight draggable">Drag me down.</li>
    </ul>
    
    <ul id="sortable" style="float: left;">
        <li class="ui-state-default">Item 1</li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
        <li class="ui-state-default">Item 4</li>
        <li class="ui-state-default">Item 5</li>
    </ul>
    
</div>

CSS

.demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
.demo li { margin: 5px; padding: 5px; width: 150px; }

.draggable { height: 3em; }
#sortable  { border: solid 2px #bbe; }

.desc { margin-bottom: 2em; font-size: small;}
.desc h2 { border: solid gray; border-width: 0 0 1px 3px}
ul.note {margin-left: 2em;}
ul.note li {list-style-type: disc}

JavaScript

$(function() {
    $("#sortable").sortable({
        revert: true,
		stop: function (e, t) {        
            alert($(this).data('index'));
        },
        receive: function (ev, ui) {                  
            var $target = ($(this).data().uiSortable  || $(this).data().sortable).currentItem;
                
		    var $source = $(ui.sender);                
           $target.data('index',$source.data('index'));
        }
    });

    $(".draggable").draggable({
        connectToSortable: "#sortable",
        helper: function (event, ui) {
            var target = $(this).clone(true);
            return target;
        },
        revert: "invalid"
    });
   
});