Script.Aculo.Us Sorting Elements - script.aculo.us
All Tutorials
Job SearchWhat is Script.Aculo.Us Sorting Element?
Many times, you need to provide the user with the capability to reorder elements (along with objects in a list) by dragging them.
Without drag and drop, reordering may be a nightmare, but script.aculo.us provides extended reordering assist out of the container thru the Sortable class. The element to become Sortable is passed to the create() method within the Sortable namespace.
A Sortable consists of item elements in a container element. when you create a brand new Sortable, it looks after the creation of the corresponding Draggables and Droppables.
To use script.aculo.us's Sortable capabilities, you'll need to load the dragdrop module, which also requires the consequences module. So your minimum loading for script.aculo.us will look like this −
Sortable Syntax
Here is the syntax of the create() technique to create a sortable item. The create() technique takes the id of a box element and kinds them out based on the passed alternatives.
Use Sortable.wreck to completely cast off all the event handlers and references to a Sortable created by Sortable.create.
Note − A name to Sortable.create, implicitly calls on Sortable.destroy if the referenced detail turned into already a Sortable. here is the easy syntax to call the wreck feature.
Use Sortable.wreck to completely cast off all the event handlers and references to a Sortable created by Sortable.create.
Note − A name to Sortable.create, implicitly calls on Sortable.destroy if the referenced detail turned into already a Sortable. here is the easy syntax to call the wreck feature.
Sortable Options
You can use one or more of the following options while creating your Sortable object.
|
Option |
Description |
|
tag |
Specifies the type of the elements within the sortable container that are to be sortable via drag and drop. Defaults to 'li'. |
|
only |
Specifies a CSS class name, or array of class names, that a draggable item must posses in order to be accepted by the drop target. This is similar to theacceptoption of Draggable. By default, no class name constraints are applied. |
|
overlap |
One of false,horizontalorvertical. Controls the point at which a reordering is triggered. Defaults tovertical. |
|
constraint |
One of false,horizontalorvertical. Constrains the movement of dragged sortable elements. Defaults tovertical. |
|
containment |
Enables dragging and dropping between Sortables. Takes an array of elements or element-ids. Important note: To ensure that two way dragging between containers is possible, place all Sortable.create calls after the container elements. |
|
handle |
Same as the Draggable option of the same name, specifying an element to be used to initiate drag operations. By default, each element is its own handle. |
|
hoverclass |
Specifies a CSS class name to be applied to non-dragged sortable elements as a dragged element passes over them. By default, no CSS class name is applied. |
|
ghosting |
Similar to the Draggable option of the same name, If true, this option causes the original element of a drag operation to stay in place while a semi-transparent copy of the element is moved along with the mouse pointer. Defaults tofalse. This option does not work with IE. |
|
dropOnEmpty |
If true, it allows sortable elements to be dropped onto an empty list. Defaults tofalse. |
|
scroll |
If the sortable container possesses a scrollbar due to the setting of the CSS overflow attribute, this option enables auto-scrolling of the list beyond the visible elements. Defaults tofalse. |
|
scrollSensitivity |
When scrolling is enabled, it adjusts the point at which scrolling is triggered. Defaults to 20. |
|
scrollSpeed |
When scrolling is enabled, it adjusts the scroll speed. Defaults to 15. |
|
tree |
If true, it enables sorting with sub-elements within the sortable element. Defaults to false. |
|
treeTag |
If the tree option is enabled, it specifies the container element type of the sub-element whose children takes part in the sortable behavior. Defaults to 'ul'. |
You can provide the following callbacks in the options parameter:
|
Option |
Description |
|
onChange |
A function that will be called upon whenever the sort order changes while dragging. When dragging from one Sortable to another, the callback is called once on each Sortable. Gets the affected element as its parameter. |
|
onUpdate |
A function that will be called upon the termination of a drag operation that results in a change in element order. |
Sorting Examples
This demo has been verified to work in IE 6.0. It also works in the latest version of Firefox.
Use our online compiler for a better understanding of the code with different options discussed in the above table.
This will produce following result –
This will produce following result −
(1).png "sorting elements")
Note the usage of tag:'li'. Similarly, you can sort the following list of images available in <div> −
This will produce following result –
Drag and drop list images to re-arrange them
Serializing the Sort able elements
The Sortable item additionally gives a feature Sortable.serialize() to serialize the Sortable in a format suitable for HTTP GET or publish requests. this will be used to publish the order of the Sortable via an Ajax name.
Syntax
Options
You can use one or more of the following options while creating your Sortable object.
|
Option |
Description |
|
tag |
Sets the kind of tag that will be serialized. This will be similar to what is used inSortable.create. |
|
name |
Sets the name of the key that will be used to create the key/value pairs for serializing in HTTP GET/POST format. So if thenamewere to be xyz, the query string would look like − xyz[]=value1 & xyz[]=value2 & xyz[]=value3 Where the values are derived from the child elements in the order that they appear within the container. |
Serialize Examples
In this example, the output of the serialization will most effective give the numbers after the underscore within the listing item IDs.
To strive, leave the lists in their original order, press the button to look the serialization of the lists. Now, re-order some factors and click the button again.
This will produce following result –
(1).png "sorting elements")
Moving Items between Sortables
The following example shows how to move items from one list to another list.
Note that the containment option for each box lists each the containers as containment elements. by using doing so, we've got enabled the child factors to be sorted within the context in their discern; It additionally enables them to be moved between the 2 containers.
We set dropOnEmpty to real for each the lists. to peer the effect this feature has on that listing, flow all the elements from one list into different so that one listing is empty. you will discover that it is allowing to drop detail on empty listing.
This will produce following result –
(1).png "sorting elements")
Binding to Ajax
Of path, onUpdate is a high candidate for triggering Ajax notifications to the server, for example while the user reorders a to-do list or a few other statistics set. Combining Ajax.Request and Sortable.serialize makes live persistence easy enough –
Sortable.serialize creates a string like: list[]=1 & list[]=2 & listing[]=three &list[]=four, in which the numbers are the identifier parts of the listing element ids after the underscore.
Now we need to code report.php, that allows you to parse posted data as parse_str($_POST['data']); and you could do whatever you need to do with this sorted information.
To learn more about AJAX, please go through our simple Ajax Tutorial.
