SORT & DROPPABLE

by bizamajig

HTML

<ul>
    <li>sortable 1</li>
    <li>sortable 2</li>
    <li>sortable 3</li>
</ul>
<div>droppable</div>

CSS

ul {
    display: block;
    background-color: #f88;
    padding: 10px;
}

li {
    display: block;
    width: 100%;
    background: #ff8;
    margin: 10px;
}

div {
    position: relative;
	margin-top: 20px;
    background-color: #88f;
    height: 100px;
}

JavaScript

$('div').droppable({
    drop: function(e, ui) {
        ui.draggable.parent().addClass('dropped');
alert( 'd' );
     }
});

$('ul').sortable({
    stop: function(){
alert( 's' );
        if ($(this).hasClass('dropped')){
            $(this).sortable('cancel');
            $(this).removeClass('dropped');
        }           
    }
});