MooTools Demos - Fx.Sort

Fx.Sort

With Fx.Sort you can reorder a group of items with a transition.

Notice: Fx.Sort does not, by default, reorder the DOM; it just puts the elements into x/y locations that imply the sort, but their location in the DOM remains unless you execute Fx.Sort:rearrangeDOM.

<label for="fxTransition">Transition</label>
<select id="fxTransition" style="width: 100px;">
	<option value="linear">Linear</option>
	<option value="Quad">Quadratic</option>
	<option value="Cubic">Cubic</option>
	<option value="Quart">Quartic</option>
	<option value="Quint">Quintic</option>
	<option value="Sine">Sinusoidal</option>
	<option value="Expo">Exponential</option>
	<option value="Circ">Circular</option>
	<option value="Bounce">Bouncing</option>
	<option value="Back" selected="">Back</option>
	<option value="Elastic">Elastic</option>
</select>

<select id="fxEase" style="width: 100px;">
	<option value="easeIn">easeIn</option>
	<option value="easeOut">easeOut</option>
	<option value="easeInOut" selected="">easeInOut</option>
</select>

<label for="duration">duration</label>
<input type="text" id="duration" value="1000" style="width: 60px;" />

<input id="mode" type="checkbox" value="vertical" checked />
<label for="mode">vertical sort</label>

<p id="note">*you can click on any two elements below to swap their position</p>

<div id="container">
	<div class="red sort">red</div>
    <div class="purple sort">purple</div>
    <div class="green sort">green</div>
    <div class="orange sort">orange</div>
    <div class="blue sort">blue</div>
</div>

<p>
	<a href="#" class="fireSort" title="Arrange the items in the original order reversed (...3,2,1,0)">backward</a> |
	<a href="#" class="fireSort" title="Arrange the items in the original order (0,1,2,3,etc)">forward</a> |
	<a href="#" class="fireSort" title="Arrange the items in the current order reversed">reverse</a>  |
	<a href="#" id="sort" title="Rearranges the items visually into a new order">Sort [1,3,0,2,4]</a> |
	<a href="#" id="swap" title="Swaps the position of one item with another">Swap first and last child</a> |
	<a href="#" id="order" title="Retrieves the current sort order">Current order</a> |
	<a href="#" id="reorderDOM" title="Rearranges the DOM to the current sort order">rearrangeDOM</a>
</p>

<h3> Current DOM order </h3>
<pre id="output"></pre>

window.addEvent('domready', function(){

var container = document.id('container'),	//cache sort container
		queuedElems = [];						//used to track what elements to swap on click

var sorter = new Fx.Sort($$('#container .sort'), {
		duration: document.id('duration').get('value'),
		transition: Fx.Transitions[document.id('fxTransition').value][document.id('fxEase').value],
		mode: 'vertical',
		onComplete: function(){
			displayDOM();	// update the UI DOM visual on each sort
		}
	});

displayDOM();	//update the UI DOM visual on domready

//sort based on text of element that was clicked (forward, backward, reverse)
	$$('.fireSort').addEvent('click', function(event){
		event.stop();
		sorter[this.get('text')]();
	});

document.id('order').addEvent('click', function(event){
		event.stop();
		alert(sorter.currentOrder);
	});

document.id('reorderDOM').addEvent('click', function(event){
		event.stop();
		sorter.rearrangeDOM();
		displayDOM();	//onComplete isn't fire so update UI DOM visual manually
	});

document.id('mode').addEvent('change', function(){
		sorter.rearrangeDOM();	//rearrange DOM first so that elements stack properly
		sorter.options.mode = (this.checked) ? 'vertical' : 'horizontal';
		container.toggleClass('container');
		displayDOM();	//onComplete isn't fire so update UI DOM visual manually
	});

document.id('swap').addEvent('click', function(event){
		event.stop();
		var elems = container.getChildren();
		sorter.swap(elems[0], elems[elems.length - 1]);
	});

document.id('sort').addEvent('click', function(event){
		event.stop();
		sorter.sort([1, 3, 0, 2, 4]);
	});

$$('#fxTransition, #fxEase').addEvent('change', function(){
		var transition = document.id('fxTransition').get('value'),
			easing = document.id('fxEase').get('value');
		sorter.options.transition = Fx.Transitions[transition][easing];
	});

document.id('duration').addEvent('keyup', function(){
		sorter.options.duration = this.value.toInt();
	});

//allows users to click on elements to swap their positions
	$$('.sort').addEvent('click', function(){
		if (queuedElems.length > 0) sorter.swap(queuedElems.pop(), this);
		else queuedElems.push(this);
	});

//helper function, displays the DOM visually to see how the sort effects it
	function displayDOM(){
		var str = '';
		container.getChildren().each(function(item){
			str += '<div style="' + item.style.cssText + '">' + item.get('text') + '</div>\n';
		});
		document.id('output').set('text',  str);
	}
});

Demo
Docs
CSS
HTML
JavaScript

Transition duration vertical sort

*you can click on any two elements below to swap their position

red

purple

green

orange

blue

Current DOM order

Documentation References:

<select id="fxEase" style="width: 100px;">
	<option value="easeIn">easeIn</option>
	<option value="easeOut">easeOut</option>
	<option value="easeInOut" selected="">easeInOut</option>
</select>

<label for="duration">duration</label>
<input type="text" id="duration" value="1000" style="width: 60px;" />

<input id="mode" type="checkbox" value="vertical" checked />
<label for="mode">vertical sort</label>

<p id="note">*you can click on any two elements below to swap their position</p>

<h3> Current DOM order </h3>
<pre id="output"></pre>

window.addEvent('domready', function(){

var container = document.id('container'),	//cache sort container
		queuedElems = [];						//used to track what elements to swap on click

displayDOM();	//update the UI DOM visual on domready

//sort based on text of element that was clicked (forward, backward, reverse)
	$$('.fireSort').addEvent('click', function(event){
		event.stop();
		sorter[this.get('text')]();
	});

document.id('order').addEvent('click', function(event){
		event.stop();
		alert(sorter.currentOrder);
	});

document.id('reorderDOM').addEvent('click', function(event){
		event.stop();
		sorter.rearrangeDOM();
		displayDOM();	//onComplete isn't fire so update UI DOM visual manually
	});

document.id('swap').addEvent('click', function(event){
		event.stop();
		var elems = container.getChildren();
		sorter.swap(elems[0], elems[elems.length - 1]);
	});

document.id('sort').addEvent('click', function(event){
		event.stop();
		sorter.sort([1, 3, 0, 2, 4]);
	});

document.id('duration').addEvent('keyup', function(){
		sorter.options.duration = this.value.toInt();
	});

MooTools

Demos

Slick

Drag and Drop

Effects

Events

Request

Plugins

Fx.Sort

Current DOM order

Documentation References: