Sortables Demo : Sortable « Mootools « JavaScript DHTML

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&amp;drop list-elements
    into another list.
  </p>
  <div id="anotherSortablesDemo">
  
  </div>
</body>
</html>
Related examples in the same category

This To Do list is a good example of using Sortables in lists which have items dynamically added