Mega Code Archive
Sortables Demo
<![CDATA[
<!--
MooTools is released under the Open Source MIT license,
which gives you the possibility to use it and modify
it in every circumstance.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style rel="stylesheet" type="text/css">
div.floated {
width: 400px;
float: left;
margin-left: 1em;
}
ul.myList {
margin-left: 20px;
}
ul.myList li {
cursor: pointer;
}
ul.anotherList {
width: 200px;
float: left;
border: 1px solid black;
background-color: #f9f9f9;
min-height: 20px;
margin: 5px;
padding-left: 20px;
}
ul.anotherList li {
margin-left: 10px;
list-style-type: decimal;
}
ul.anotherList li:hover {
background-color: #fff;
}
</style>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
// We autogenerate a list on the fly
var li = [];
for (i = 1; i <= 5; i++)
li.push(new Element('li', {
text: 'Item #'+i
}));
var ul = new Element('ul', {
'class': 'myList'
}).inject('sortablesDemo').adopt(li);
// First Example
new Sortables(ul);
// Second Example
// We just clone the list we created before
var uls = $$([ul.clone(), ul.clone()])
uls[1].getElements('li').setStyle('font-weight', 'bold');
uls.inject('anotherSortablesDemo').addClass('anotherList');
new Sortables(uls, {
revert: true
});
});
</script>
<title>Sortables Demo</title>
</head>
<body>
<h1>Sortables</h1>
<h2>Introduction</h2>
<p>
Back in the 90s you sorted items in a list with arrows up/down or maybe even
with input-fields where you specified the item's position. But now you have the
Sortables-Plugin, which comes in handy when you are using one or more lists
and need the user to sort them.
</p>
<div id="sortablesDemo">
</div>
<hr />
<h2>Advanced Example</h2>
<p>
The advanced example shows, that it is even possible to drag&drop list-elements
into another list.
</p>
<div id="anotherSortablesDemo">
</div>
</body>
</html>
]]>