Since I first wrote this in August of 2006, Scriptaculous has come a long way. Also, I've written a number of other Scriptaculous tutorials and examples on my blog. Listed below are links to some of the other ones I've written. The rest of them focus on using Scriptaculous directly (it's easy!) - not necessarily with a PHP wrapper.
So scriptaculous lists are really easy to use and implement...so why put together a PHP script to wrap around it all? I did this for a couple reasons (no the following list isn't sortable!):
The resulting PHP class is a very simple class that makes it easy - with a couple lines of code to get a sortable list (or sortable just about anything) onto a page and to translate the result into a PHP array. I've got no documentation except for this sample page...so here's a brief rundown of the features:
This is a list of the photography sections on my website. I put them all in a standard 'ul' list - each item is a 'li' list item. I might use this list to help me choose a new order for the categories on my site. All I would need to do is drag and drop the list items until I have an order that I'm happy with. Once I'm done I would submit my changes - in the background, I'm using the scriptaculous serialize function to get the list of items (in order) into a hidden input - in this case I've made the input visible. I can then submit the form and get an array back.
My PHP class has a function that knows how to understand the scriptaculous serialized string and translates it into a simple PHP array with the items and there order. Once I have this, it's easy to do things like submit the new order to a database. If you click the submit button, you can see the update statements I would send to the database. Clicking the 'View Serialized Lists' will fill the inputs with the serialized lists.
Sorting isn't just for lists. Here we're sorting divs - some of them even have some complex markup inside them including styling, links, tables, and form elements. In order to style elements other than lists, we need to pass a third argument to the addList function that tells scriptaculous which elements should be draggable.
|Nice Demo?|| Yes|
All the examples so far have shown sorting vertically - this one shows horizontal and vertically. It also demonstrates how to pass extra options to the addList method. In this case we passed overlap and constraint settings to scriptaculous. For a list of all the options please see the sortable.create page on the scriptaculous site. The only option that you don't have to pass this way is the 'tag' option.