<div id="draggable" class="ui-widget-content">
<p>drag me</p>
</div>
<div id="droppable" class="ui-widget-content">
<p>drag me</p>
</div>
<ol id="sortable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ol>
#draggable{
width:100px;
height:50;
z-index:1;
};
.ui-selecting{
color:yellow;
}
.ui-selected{
color:red;
}
#sortable { list-style-type: none; margin-left:0px;}
$(function() {
$('#draggable').draggable();
$('#droppable').droppable({
drop:function(event, ui){
$('#draggable')
.addClass('ui-state-highlight')
.find('p').html('success')
},
out:function(event, ui){
$('#draggable')
.removeClass('ui-state-highlight')
.find('p').html('out');
}
}).resizable();
//$('#sortable').selectable();
$('#sortable').sortable();
$('#sortable').disableSelection();
});