#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;
}
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 ,
//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 - 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 - .
$('newTask').set('value', '');
//Add the - to our list.
$('todo').adopt(li);
//Do a fancy effect on the - .
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++;
});
});
Dynamic Sortables Demo
Dynamic Sortables
Introduction
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.
My To Do List