Blog :: Quickform Integration Example 2

Ok, all of you who aren't php programmers, but read my blog anyways (Mom!), click here and notice that if you mouse over the thumbnails you can click on them and drag them around (assuming you have a modern browser at least.  And no the save button doesn't work, this is just a static copy of one of the editors for blueCMS)..  Cool though huh... Alright, that's it, you can stop reading now.

Still here? You must be here for the code. Before I throw it at you though, let me explain what it does.  I extended QuickForm to create an element (HTML_QuickForm_Sorter) that accepts an array and generates two elements.  The first is a hidden element that stores the indexes of the array as a comma separated list.  The second is a unordered list with list elements that encode the array index in their id and display whatever was in the array element in the list.

Additionally a javascript function is generated that uses the dom to update the order stored in the hidden field when you drag-n-drop reorder the elements of the ul.  Yes, I said drag and drop.  This is enabled by the amazing javascript libraries from scriptaculous and prototype. Truly works of genius. So, enough stalling, you want the code. Here you go.  The control can be used in the usual way a custom QuickForm control is as explained last time.  The only things to note is that you need to download the Javascript libraries seperately for this to work.  There is a helper function called getJsIncludes that will return the script tags if you pass them the folder the JS libs are stored in.

Posted on Jul 27th 2005, 10:21 PM