Web Design Sydney

Ok guys and girls, I won’t write too much on this topic, except to say that over the years I have seen literally hundreds of forum threads about nested sortable lists in MooTools, many of these threads end with horrible patchwork solutions cobbling together 10 random unsupported plugins to get an outcome that works (miserably)…

This solution came about while working for a really cool start-up venture, they are not around any more so the code is going public with the intention that others may benefit from the work, enjoy 🙂

Demo

View Demo :: MooTools

The HTML

 Grab it from the 'example page' or the 'zip file' at the bottom of this post

Usage

new Nested('ID-of-your-list', {
	onStart: function(el) {
		this.onStyle(el);
	},
	onComplete: function(el) {
		this.offStyle(el);
	}
});

Options (example)

var options = {
	childTag: 'LI',
	lockClass: 'locked',
	ghost: true,
	collapse: true,
	childStep: 40, 
	closedSpace: 3, 
	onStart: function(el) {
		this.onStyle(el);
	},
	onComplete: function(el) {
		this.offStyle(el);
	}
}

Set up options, explained below

• childTag: string – the child nodeType, you shouldn’t need to change this
• lockClass: string – class for locked nodes
• ghost: boolean – create visual ghosting node
• collapse: boolean – are options collapsible
• childStep: number – attempts to become a child of the previous Item if the mouse is moved this number of pixels right
• closedSpace: number – a space for top and bottom insert detection when near closed nodes
• onStart: function – things to do to an element when it STARTS dragging
• onComplete: function – things to do to an element when it STOPS dragging

Ok the only options there that need some further explaining are probably, ‘childStep’ and ‘closedSpace’.

childStep: we need a value that behaves like a border, meaning as you would manually drag a node to the right to nest it, this value determines how far you need to drag it before accepting you want to nest it.

closedSpace: when nearing a closed node it is nice to have the styles for this event to appear before hovering directly over the node that is closed. It provides your users with more of an idea about what can and can’t be done before they try to do it.

Download

Contains ‘MooTools Nested Sortable List’ example and code

MooTools Nested Sortable Lists

jQuery

Sorry guys, no jQuery version yet, have not had the time to convert it.

Disclaimer

I do not intend to support this script with feature requests or bug fixes, I’m posting the last stable copy I have in my possession to help prevent other developers from going around in circles and provide a starting point for your own Nested Sortables implementations 🙂