Scriptaculous Lists with PHP

by Greg Neustaetter

Scriptaculous Sortables

Scriptaculous is one of many great new JavaScript libraries created to answer the call for well written 'Web 2.0' JavaScript libraries. Written by Thomas Fuchs, scriptaculous has many features that can be used in AJAX-ified applications, drag-and-drop effects, and a whole slew of visual effects. The drag-and-drop effects, most notably the sortables, caught my eye because the look great, they are so easy to implement, and they're just so much nicer than the standard listbox with up/down arrows that we see in most of today's applications and administration tools.

Update

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.

SLLists - a PHP wrapper around scriptaculous sortables

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:

Download Version 0.02 of the class (and this sample page) to get started. All the examples on this page were created using the class - no JavaScript needed! As of version 0.02 this includes a sample script that shows usage with a database

Example: Sorting a regular list

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.



categoriesListOrder:
divOrder:
imageOrder:
imageFloatOrder:





Example: Sorting divs

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.

This is the first div
This is the second div
This is the third div
This is the fourth div, it also has a lot of text and will cover more than one line. It's bigger than the other divs here, but that should really be no problem. Oh yeah, it also has formatting, and links
This is the sixth div
This is the seventh div. It also has a table below with some form inputs
First Name:
Nice Demo? Yes
No



Example: Sorting images

Example: Float sort

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.






Enjoy!
- Greg