Drag and Drop with Scriptaculous Lists
«Back to Graphics by Greg
This example shows a list of lists. You can drag the different items between and within groups, and then you can drag the groups
themselves. As a side note, this also uses the Scriptaculous 'Builder' object to build new groups
Create New Group
Group 1
This is item 1
This is item 2
This is item 3
This is item 4
This is item 5
This is item 6
This is item 7
This is item 8
This is item 9
This is item 10
Group 2
Group 3
Debug and Help Information
This page utilizes the Scriptaculous library for drag and drop - details on drag
and drop support can be found in their documentation
You can drag and drop both groups - drag from the title of the group, and the individual items.
In order to add sortables to a page, you need to use the Sortable.create function, just before the close of the body element (as in this page)
You need to specify the container element, the sortable element type(tag), and optionally a number of other things such
as whether an item can be dropped in an empty group (dropOnEmpty),the class of items that can be drag/dropped (only),
and the elements it can be dropped on(containment)
Creating new groups on the fly
Additional javascript has been added that allows people to create new groups on the fly without reloading the page
This function, 'createNewSection', users the Scriptaculous Builder functionality to create the new group, add attributes, and add children.
The function I created for generating new groups also uses the Scriptaculous Effects to 'fade-in' the new div.
Each time a new group is created, all the sortables are destroyed and then recreated
Getting the results to send to the backend
Scriptaculous has a built-in function to 'serialize' (Sortable.serialize('elementid')) the items in a list. This returns a string that looks like the arguments
for a GET request. It shows listname[]=1&listname[]=2&listname[]=3 where listname is the name of the list requested, and the numbers
(1,2,3) are the items in the list, in order. This would mean that the order is item 1, item 2, item 3. If the result were
listname[]=2&listname[]=3&listname[]=1, the final order would be item 2, item 3, item 1.
Scriptaculous also has a built-in function to get an array of the sequence of an item (Sortable.sequence('elementid'))
In order to use the serialize or sequence function, we need to give the groups and questions ids that start with a string,
are followed by an underscore, and end with a number (usually a unique key for the item).
A debug function is provided that shows the order of groups with a list of items inside the groups. This takes advantage of the Sortable.sequence function to get
the debug information.