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;
}
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
});
});
Sortables Demo
Sortables
Introduction
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.
The advanced example shows, that it is even possible to drag&drop list-elements
into another list.