Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

script.aculo.us Sorting tree Option

  • Last Updated : 11 Feb, 2021

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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!