Sortables

Sortables example. Heigths and colors are auto generated in this demo.

new Sortables($('test'), {
 
	initialize: function(){
		var step = 0;
		this.elements.each(function(element, i){
			var color = [step, 82, 87].hsbToRgb();
			element.setStyle('background-color', color);
			step = step + 35;
			element.setStyle('height', $random(40, 100));
		});
	}
 
});
<ul id="test">
	<li class="sortme">0</li>
	<li class="sortme">1</li>
	<li class="sortme">2</li>
	<li class="sortme">3</li>
	<li class="sortme">4</li>
	<li class="sortme">5</li>
	<li class="sortme">6</li>
	<li class="sortme">7</li>
	<li class="sortme">8</li>
	<li class="sortme">9</li>
	<li class="sortme">10</li>
</ul>
#test { 
	position: inherit;
}
 
ul#sortables {
	width: 300px;
	margin: 0;
	padding: 0;
}
 
li.sortme {
	padding: 4px 8px;
	color: #fff;
	cursor: pointer;
	list-style: none;
	width: 300px;
	background-color: #222;
}
 
ul#sortables li {
	margin: 10px 0;
}
  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10