This To Do list is a good example of using Sortables in lists which have items dynamically added : Sortable « Mootools « JavaScript DHTML






  1. JavaScript DHTML
  2. Mootools
  3. Sortable

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>








Related examples in the same category

1.Sortables Demo