Fx.Sort.html

<style type="text/css">

#sorter {
	padding-left: 15px;
}

#sorter li {
	border: 1px solid #666;
	margin: 8px;
	padding: 4px;
}

div.spanner {
	float: left;
	margin: 4px;
	padding: 2px;
	border: 1px solid #000;
}

</style>

<ol id="sorter">
  <li id="li0">(0) stuff</li>
  <li id="li1">(1) more stuff<br />
  really</li>

  <li id="li2">(2) still more stuff</li>
  <li id="li3">(3) loads o stuff</li>
  <li id="li4">(4) blah<br />
  blah<br />
  blah</li>
</ol>
<div class="spanner">one</div>
<div class="spanner">two</div>
<div class="spanner">three</div>
<div class="spanner">four</div>
<div class="spanner">five</div>


<script src="/depender/build?require=More/Fx.Sort,Core/Element.Event,Core/Fx.Transitions"></script>

<script type="text/javascript">

var vert = new Fx.Sort($$('#sorter li'), {
	transition: Fx.Transitions.Back.easeInOut,
	duration: 1000
});

var horz = new Fx.Sort($$('.spanner'), {
	mode: "horizontal",
	transition: Fx.Transitions.Back.easeInOut,
	duration: 1000
});

makeActions([
	{
		title: "Reverses the order of the lists to 5,4,3,2,1",
		fn: function(){
			vert.backward();
			(function(){horz.backward();}).delay(1000);
		}
	},
	{
		title: "Resets the order of the lists to 1,2,3,4,5",
		fn: function(){
			vert.forward();
			(function(){horz.forward();}).delay(1000);
		}
	},
	{
		title: "Sets the order of the lists to 5,2,4,3,1",
		fn: function(){
			vert.sort([4,1,3,2,0]);
			(function(){horz.sort([4,1,3,2,0]);}).delay(1000);
		}
	},
	{
		title: "Swaps the position of 1 and 5",
		fn: function(){
			vert.swap(0,4);
			(function(){horz.swap(0,4);}).delay(1000);
		}
	},
	{
		title: "Reverses the order of the lists",
		fn: function(){
			vert.reverse();
			(function(){horz.reverse();}).delay(1000);
		}
	},
	{
		title: "Reorders the DOM to match the current sort order.",
		description: "(No visible effect; inspect in firebug.)",
		fn: function(){
			vert.rearrangeDOM();
		}
	}
]);

</script>