Sortables

Here is the 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:

<ul id="SortableExample">
		<li id="1">First</li>
		<li id="2">Second</li>
		<li id="3">Third</li>
</ul>

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

• First
• Second
• Third

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