Reorders a group of items with a transition.

• Fx.Sort
• Clientcide Tutorial/Demo

• Fx.Elements

new Fx.Sort(elements[, options]);

1. elements - (array) A collection of Elements the effects will be applied to.
2. options - (object, optional) Same as Fx.Elements options plus the additional options below.

• mode - (string) either "vertical" or "horizontal"; defaults to "vertical"

• (object) A new instance of Fx.Sort.

var mysort = new Fx.Sort($$('ul li'), {
  transition: Fx.Transitions.Back.easeInOut,
  duration: 1000
});
mysort.sort([2,0,1]); //a specific order
mysort.forward(); //forward (the original) order

• 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.

Retrieves the current sort order.

mySort.getCurrentOrder();

• (array) The current sort state.

Rearranges the items visually into a new order.

mySort.sort(order);

1. order - (array) the new order for the items.

• (object) This Fx.Sort instance.

mySort.sort([2,1,0]); //reverse

• If you pass it an incomplete order Fx.Sort will fill in the rest with the current sort. For example, if the current sort is 0,1,2, and you execute mySort.sort(1), the result will be 1,0,2.

Rearranges the DOM to the current sort order.

mySort.rearrangeDOM(order); //order is optional

1. order - (array, optional) the order to arrange the DOM with; defaults to this.currentOrder.

• (object) This Fx.Sort instance.

mySort.rearrangeDOM([1,3,2,0]);
mySort.rearrangeDOM(); //use current sort

Arrange the items in the original order (0,1,2,3,etc).

mySort.forward();

• (object) This Fx.Sort instance.

Arrange the items in the original order reversed (...3,2,1,0).

mySort.forward();

• (object) This Fx.Sort instance.

Arrange the items in the current order reversed.

mySort.reverse();

• (object) This Fx.Sort instance.

Sort by the order specified in a collection of elements; elements must be an array (collection) of the elements within the elements specified at instantiation.

mySort.sortByElements(elements);

1. elements - (array or collection) a collection or array of elements in the new order

• (object) This Fx.Sort instance.

var mySort = new Fx.Sort($$('ul li'));
mySort.sortByElements([$('li3'), $('li2'), $('li1'), $('li0')]);

• The elements passed in to sortByElements must be the same ones passed in to the effect when it was created.

Swaps the position of one item with another.

mySort.swap(element_1, element_2);

1. one - (mixed) A string of the id for an Element or an Element reference to swap
2. two - (mixed) A string of the id for the other Element or an Element reference to swap

var mySort = new Fx.Sort($$('ul li'));
mySort.swap($('#li3'), $('#li0'));
//OR
mySort.swap(3, 0);

• (object) This Fx.Sort instance.