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.

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!):

  • It isn’t very obvious from scriptaculous (or other similar drag-and-drop sorting libraries) how sortables can actually be used in a real application
    to perform a useful function.
  • I wanted a simple way to serialize the result of all this snazzy ordering into a simple PHP array with which I could update a database
  • Many people are just plain scared of JavaScript and don’t know what to do with it - I’m one of these folks too!
  • PHP is fun.

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’ll be the first to admit that there’s no real innovation here - just trying to make an already easy to use JavaScript library easier to use for the JavaScript-scared people out there. I’ve got no documentation except for a sample page…so here’s a brief rundown of the class functions:

  • SLLists - constructor that basically sets the path to the JavaScript files
  • addList - adds a list or other element as a new sortable entity
  • printTopJS - prints the JavaScript into the head of a PHP file
  • printForm - prints an HTML form that contains the hidden inputs needed. Alternatively users can create their own forms or use the printHiddenInputs functions to put these hidden inputs in existing forms
  • printBottomJS - prints the JavaScript that should go right before the closing body tag
  • getOrderArray - returns an array with items and their order after being passed an input with the serialzed scriptaculous list

Download Version 0.01 of the class (and a sample page) to get started - no JavaScript needed!

For the full info, head to the SLLists page. The page has examples and shows what scriptaculous can do. And leave some comments here if you like it or have any comments…