The user should have the ability to reorder elements (such as items in a list) by dragging and dropping them. Without drag and drop, it is not an ordinary task to reorder but script.aculo.us provides extended reordering support out of the box through the Sortable class.
When the tree option is set to “true”, it enables sorting with sub-elements within the sortable element. The default value is “false“. The element to make it sortable is passed to the create() method in the sortable namespace.
A Sortable consists of item elements in a container element. When you create a new Sortable, it takes care of the creation of the corresponding draggables and dropables.
To use script.aculo.us sortable capabilities, you’ll need to load the drag drop module, which also requires the effects module. The pre-compiled files required for code implementation are as follows.
<script type=”text/javascript” src=”scriptaculous-js-1.9.0/lib/prototype.js”></script>
<script type=”text/javascript” src=”scriptaculous-js-1.9.0/src/scriptaculous.js?load = effects,dragdrop”>
Syntax: The create() method is used to create a sortable item. The create() method takes the id of the container element and sorts them out based on the options which are passed.
Sortable.create('id-of-container', [options]);
Sortable.destroy() method is used to remove all the event handlers and references created by Sortable.create() method.
A call to Sortable.create, implicitly calls on Sortable.destroy if the referenced element was already Sortable.
Syntax:
Sortable.destroy( element );
Example 1: The following demonstrates the drag and drop feature for a list. The next example will demonstrate the drag and drop for a tree which is developed on top of a simple list element.
HTML
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="prototype.js"> </script> <script type="text/javascript" src= "scriptaculous.js?load = effects,dragdrop"> </script> <script type="text/javascript "> window.onload = function() { Sortable.create('namelist', { tag: 'li' }); } </script> <style type="text/css "> li { cursor: move; } </style> </head> <body> <p> Drag and drop the elements that are to be sorted </p> <ul id="namelist "> <li>Spanish</li> <li>French</li> <li>English</li> <li>Russian</li> <li>Arab</li> <li>Chinese</li> <li>Portugese</li> <li>Turkish</li> </ul> </body> </html> |
Output:
Before execute:
After execute:
Example 2: The following example demonstrates the drag and drops for a tree structure created out of list elements.
HTML
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="prototype.js"> </script> <script type="text/javascript" src= "scriptaculous.js?load = effects,dragdrop" "> </script> <script type="text/javascript "> window.onload = function() { Sortable.create('namelist', { tree: true, scroll: window, treeTag: 'ul', tag: 'li' }); } </script> <style type = "text/css "> li { cursor: move; } </style> </head> <body> <p> Drag and drop the elements that are to be sorted </p> <ul id="namelist "> <li>Web Technologies <ul> <li>PHP</li> <li>CSS</li> <li>JavaScript</li> </ul> </li> <li>Computer Science <ul> <li>Data structures</li> <li>Theory of CS</li> <li>Algorithms</li> </ul> </li> <li>English <ul> <li>Grammar</li> <li>Literature</li> </ul> </li> <li>Maths</li> <li>Social studies</li> </ul> </body> </html> |
Output:
Before execute:
After execute:
