How to use it?

Download it from here. Then use it like this:

<ul class="sortable">
	<li>Item 1
	<li>Item 2
	<li>Item 3
	<li>Item 4
</ul>
<script src="jquery.sortable.js"></script>
<script>
	$('.sortable').sortable();
</script>

Use .sortable-dragging and .sortable-placeholder selectors to change the styles of a dragging item and its placeholder respectively.

Use sortupdate event if you want to do something when the order changes (e.g. storing the new order):

$('.sortable').sortable().bind('sortupdate', function() {
	//Triggered when the user stopped sorting and the DOM position has changed.
});

Use items option to specifiy which items inside the element should be sortable.

$('.sortable').sortable({
	items: ':not(.disabled)'
});

Use handle option to create sortable lists with handles:

$('.sortable').sortable({
	handle: '.handle'
});

Use connectWith option to create connected lists:

$('#sortable1, #sortable2').sortable({
	connectWith: '.connected'
});

To remove the sortable functionality completely:

$('.sortable').sortable('destroy');

To disable the sortable temporarily:

$('.sortable').sortable('disable');

To enable a disabled sortable:

$('.sortable').sortable('enable');

The API is compatible with jquery-ui. So you can use jquery-ui as a polyfill in older browsers:

yepnope({
	test: Modernizr.draganddrop,
	yep: 'jquery.sortable.js',
	nope: 'jquery-ui.min.js',
	complete: function() {
		$('.sortable').sortable().bind('sortupdate', function() {
			//Store the new order.
		}
	}
});

Demos