====== Sortables ====== Here is the [[http://docs.mootools.net/Plugins/Sortables|documentation for Sortables.js]]. //Sortables// is another one of those deceptively simple MooTools widgets. It's pretty easy to make something sortable, but to be of any use you have to do something with the new state (like ping a back end server via ajax). It's not the most complex thing to do, but to do it will requires a bit of careful thought and good design principals. I'm not going to spend a lot of time showing you how to do sortables //well//, but rather just demonstrate the code here in its simplest state. Here's the html:



		First
		Second
		Third


var mySort = new Sortables($('SortableExample'), {
	clone: true,
	opacity: 0.6,
	onComplete: function(){
		console.log(mySort.serialize())
	}
});

First
Second
Third

===== Sorting across lists ===== New in MooTools 1.2 is the ability to drag and drop items from several lists. Instead of passing in a single list item for the first argument, you give a collection:


var mySort = new Sortables($$('ul.multisort'), {
	clone: true,
	opacity: 0.6,
	onComplete: function(){
		console.log(mySort.serialize())
	}
});

First
Second
Third

Four
Five
Six

Seven
Eight
Nine