Jquery UI sortable.html
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="utf-8">
<title>jQueryUIDraggable+Sortable</title>
<linkrel="stylesheet"href="../../themes/base/jquery.ui.all.css">
<scriptsrc="../../jquery-1.6.2.js"></script>
<scriptsrc="../../ui/jquery.ui.core.js"></script>
<scriptsrc="../../ui/jquery.ui.widget.js"></script>
<scriptsrc="../../ui/jquery.ui.mouse.js"></script>
<scriptsrc="../../ui/jquery.ui.draggable.js"></script>
<scriptsrc="../../ui/jquery.ui.sortable.js"></script>
<linkrel="stylesheet"href="../demos.css">
<style>
.demoul{list-style-type:none;margin:0;padding:0;margin-bottom:10px;}
.demoli{margin:5px;padding:5px;width:150px;}
</style>
<script>
$(function(){
$("#sortable").sortable({
revert:true
});
$("#draggable").draggable({
connectToSortable:"#sortable",
helper:"clone",
revert:"invalid"
});
$("ul,li").disableSelection();
});
</script>
</head>
<body><div class="demo">
<ul>
<liid="draggable"class="ui-state-highlight">Dragmedown</li>
</ul><ul id="sortable">
<liclass="ui-state-default"><div>Item1</div></li>
<liclass="ui-state-default">Item3</li>
<liclass="ui-state-default">Item4</li>
<liclass="ui-state-default">Item5</li>
</ul>
</div><!-- End demo -->
<div class="demo-description">
<p>Draggablesarebuilttointeractseamlesslywith<ahref="#">sortables</a>.</p>
</div><!-- End demo-description --></body>
</html>