JavaScript DHTML/Mootools/Sortable
Sortables Demo
<!--
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>
This To Do list is a good example of using Sortables in lists which have items dynamically added
<!--
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 type="text/css">
#addTask {
width: 490px;
margin: 10px;
background: #efefef;
border: 1px solid #a7a7a7;
text-align: center;
padding: 5px;
}
#todo li .drag-handle {
cursor: pointer;
width: 16px;
height: 16px;
background: url("move.png") no-repeat center;
float: left;
margin-right: 5px;
}
#todo {
list-style: none;
border: 1px solid #ccc;
margin: 10px auto 10px auto;
width: 75%;
padding: 10px 5% 10px 5%;
}
#listArea {
width: 500px;
border: 1px solid #ccc;
background: #efefef;
margin: 10px;
}
</style>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
window.addEvent("domready", function() {
//This is the function that will run every time a new item is added or the
//list is sorted.
var showNewOrder = function() {
//This function means we get serialize() to tell us the text of each
//element, instead of its ID, which is the default return.
var serializeFunction = function(el) { return el.get("text"); };
//We pass our custom function to serialize();
var orderTxt = sort.serialize(serializeFunction);
//And then we add that text to our page so everyone can see it.
$("data").set("text", orderTxt.join(" "));
};
//This code initalizes the sortable list.
var sort = new Sortables(".todo", {
handle: ".drag-handle",
//This will constrain the list items to the list.
constrain: true,
//We"ll get to see a nice cloned element when we drag.
clone: true,
//This function will happen when the user "drops" an item in a new place.
onComplete: showNewOrder
});
//This is the code that makes the text input add list items to the <ul>,
//which we then make sortable.
var i = 1;
$("addTask").addEvent("submit", function(e) {
e.stop();
//Get the value of the text input.
var val = $("newTask").get("value");
//The code here will execute if the input is empty.
if (!val) {
$("newTask").highlight("#f00").focus();
return; //Return will skip the rest of the code in the function.
}
//Create a new <li> to hold all our content.
var li = new Element("li", {id: "item-"+i, text:val});
//This handle element will serve as the point where the user "picks up"
//the draggable element.
var handle = new Element("div", {id:"handle-"+i, "class":"drag-handle"});
handle.inject(li, "top");
//Set the value of the form to "", since we"ve added its value to the <li>.
$("newTask").set("value", "");
//Add the <li> to our list.
$("todo").adopt(li);
//Do a fancy effect on the <li>.
li.highlight();
//We have to add the list item to our Sortable object so it"s sortable.
sort.addItems(li);
//We put the new order inside of the data div.
showNewOrder();
i++;
});
});
</script>
<title>Dynamic Sortables Demo</title>
</head>
<body>
<h1>Dynamic Sortables</h1>
<h2>Introduction</h2>
<p>
This To Do list is a good example of using Sortables in lists which have items dynamically added. Notice that on line 47 of the JavaScript file, we make a call to sort.addItems(). It is critical that we call this method on our Sortables object every time we add a new item to the list.
</p>
<h2>My To Do List</h2>
<form id="addTask">
<input type="text" id="newTask" />
<input type="submit" value="Add Task" />
</form>
<div id="listArea">
<ol id="todo"></ol>
</div>
<div id="data"/>
</body>
</html>