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.
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:
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
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.
| First Name: | |
| Nice Demo? | Yes No |
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.