Stillnet Studios

We had a need at work this week to create an interface that allows users to change the sort order of items using a drag-n-drop interface. Drag-n-Drop is one thing that Adobe’s Spry library is missing. But with the help of the Scriptaculous JavaScript library, this is a pretty easy task.

Scriptaculous is an add-on to the Prototype JavaScript framework. Start by downloading Scriptaculous and linking to it on your page. You don’t need to download Prototype separately, its included.

<script language="JavaScript" src="/javascript/prototype.js"></script>
<script language="JavaScript" src="/javascript/scriptaculous.js"></script>

Create your list of items you want sorted. I’m using list items here, but you could use DIVs or table data elements.

<ul id="sortable_list" style="cursor: move">
   <li>The first item</li>
   <li>Then the second one</li>
   <li>Of course then comes the third</li>
   <li>And finally, the fourth</li>
</ul>

Then, one important line of JavaScript. Note, this must come after your sortable element.
<script language="JavaScript">
Sortable.create("sortable_list");
</script>

“sortable_list” is the ID of your element containing your sortable items. There are many options you can give to the create() method, see the Scriptaculous documentation for full details. Go ahead and try it out below.

The first item Then the second one Of course then comes the third And finally, the fourth

Click and drag these

But how do we keep track of the new order? This could be a control to allow users to order pages on their website, headlines on their homepage, etc. After they sort them into the desired order, we need to do something with that information. There are many ways to do this. I’ll show two.

The first involves using DOM methods to find out what nodes are inside an element.

orderedNodes = document.getElementById("sortable_list").getElementsByTagName("li");

orderedNodes is now an array of LI elements inside the “sortable_list” element, in the order displayed. All we need to do with that is loop through it and write the data to a hidden field that will be sent to the server when the form is submitted. I would put the looping code into a function that gets called using the onSubmit event handler.

But what do we put in the hidden field? The text of the LI element? Thats not very useful. So how about we add the recordids to the LI elements:

<ul id="sortable_list">
   <li recordid="1">The first item</li>
   <li recordid="2">Then the second one</li>
   <li recordid="3">Of course then comes the third</li>
   <li recordid="4">And finally, the fourth</li>
</ul>

Then in our JavaScript loop, we can use the getAttribute method to pull back the recordids. If you are concerned about your HTML not validating because of the non standard LI attribute, you could put it into its own namespace, as in mysite:recordid=”n” (correct me if I’m wrong).

So here’s what the function would look like. I’m alert()ing the value instead of writing it to a hidden field here.

function getOrder() {
  var orderList = '';
  orderedNodes = document.getElementById("sortable_list").getElementsByTagName("li");
  for (var i=0;i < orderedNodes.length;i++) {
    orderList += orderedNodes[i].getAttribute('recordid') + ', ';
    }
  alert(orderList);
  }

You should get the recordids of the example elements, in the order you sorted them.

So after I went through all that work, I found the Sortable.serialize() method. This Scriptaculous method turns a Sortable object into a list of name[]=value pairs separated by ampersands. The catch is you’ll have to store the recordids in the ID attribute, and it needs to be in a specific format: “string_identifier”, where identifier is the ‘recordid’ we have been using. The ’string’ portion is ignored. Example:

<ul id="sortable_list">
   <li id="item_1">The first item</li>
   <li id="item_2">Then the second one</li>
   <li id="item_3">Of course then comes the third</li>
   <li id="item_4">And finally, the fourth</li>
</ul>

To see an example of what the serialize() method returns,

The format may seem strange to those unfamiliar with PHP.

sortable_list[]=1&sortable_list[]=2&sortable_list[]=3&sortable_list[]=4

In PHP (and a few other languages) you can pass this string directly on the URL and end up with sortable_list being an array. You could also pass the whole string in one variable, then run that variable through the parse_str function to turn that string into an array of values.

parse_str($_GET['sortorder'],$newSortorderArray);

In ColdFusion you’ll just have to be aware that the square brackets are going to be on there when you go to parse out your values. I prefer the first method of getting the data if you are using ColdFusion, rather than messing with the PHP-like format that serialize() returns. I also like it because I’m not sticking the recordids into the ID attribute, which just feels weird.

You don’t have to wait until the form is submitted to get the new sort order, Scriptaculous offers two different event handlers you can use - onChange and onUpdate. You could recalculate your hidden field each time the sort order is changed, or even make an AJAX call to update your database immediately. There’s really quite a bit more you can do - add effects when the element is picked up and dropped, specify a hover class to be used when the user mouses over an item, and more.

This entry was posted on Sunday, December 31st, 2006 at 9:51 pm and is filed under Web Development, AJAX / JavaScript.