Demo: Draggable, Sortable and Droppable

Demos > Draggable, Sortable and Droppable

Source

<div class="droppable" id="persons">
	<div class="item"><span class="first">First</span> <span class="last">Last</span></div>
</div>
<div id="drop">
	Drop here!
</div>

$('#persons')
	.items([
		{first:'Isaac', last:'Newton'},
		{first:'Johannes', last:'Keppler'},
		{first:'Alessandro', last:'Volta'},
		{first:'Blaise', last:'Pascal'}
	])
	.sortable()
	.chain();
$('#drop').droppable({
	accept: 'droppable',
	drop:function(droppable, item){
		var data = item.item();
		this.append('<br/>'+data.first+' '+data.last);
	}
});