require_once('SLLists.class.php'); $sortableLists = new SLLists('scriptaculous'); $sortableLists->addList('categories','categoriesListOrder'); $sortableLists->addList('divContainer','divOrder','div'); $sortableLists->addList('imageContainer','imageOrder','img'); $sortableLists->addList('imageFloatContainer','imageFloatOrder','img',"overlap:'horizontal',constraint:false"); $sortableLists->debug = true; ?>
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.