|
<!--
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>
|