new earth online

Sometimes it can really be useful to let a user sort a list of items, and this can easily be done using Scriptaculous, but when it comes to being able to sort dynamically updated lists it can get a little more complicated.

Scriptaculous is an excellent Javascript library created by Thomas Fuchs of Wollzelle, and expands upon many functions such as those define in the Prototype library. One of the features of Scriptaculous is it's ability to allow users to sort lists by dragging and dropping the list items within the confines of a container (the ul). This isn't just confined to ul's and ol's though - you can also use it on any element you chose. One thing that is not particularly easy without some thought however is to create a list that is sortable, that can also have new list items added on the fly. Now to start with let's assume that the list does already contain some entries, such as the following:

<ul id="sortList">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
</ul>

Which will give us:

• List item 1
• List item 2
• List item 3
• List item 4

Making this list user sortable is easy enough, we can just add the following Javascript to either some script tags at the top, or by including it in an attached file.

window.onload = function () {
  Sortable.create('sortList', {ghosting:true});
}

There are other options available when creating the sortable list, and they can be seek in the Scriptaculous Wiki. This will now act as a basic sortable list, but now we may find we want to be able to add elements to the list too. In doing so the Sortable list becomes sortable no more, and will need to be recreated.

<p>
  <input type="text" id="rowText" name="rowText" value="" />
  <button onclick="addItem();">+</button>
  <button onclick="removeItem();">-</button>
</p>

Adding the above markup to your page will now give a text input, and two buttons that we'll use for adding and removing rows from the list. To actually perform these actions we'll need to add a little more JavaScript to the mix.

var itemCount = 4;

function addItem() {
  ++itemCount;
  var row = document.createElement('li');
  if($('rowText').value != '') {
    row.innerHTML = $('rowText').value;
  } else {
    row.innerHTML = 'List item ' + itemCount;
  }
  $('sortList').appendChild(row);
  Sortable.create('sortList', {ghosting:true});
}

function removeItem() {
  var list = $('sortList');
  list.removeChild(list.lastChild);
  Sortable.create('sortList', {ghosting:true});
}

The above Javscript uses the normal DOM commands to create and remove nodes from the list element, though this can also be done using the Builder helper functions in Scriptaculous. Once you've added the above JavaScript (and have ensured you've also remembered to add links to the Scriptaculous library) you'll have a sortable list that can be dynamically updated with it still being sortable.