MooTools - Sortables

Sortables is an advanced feature in web development and can really open up the options with your user interface designs. It also includes a great function called "serialize" that manages a list of element ids and is useful for server side scripting.

Creating a New Sortable Object

First, we send the list of items to a variable. If you want an array of the list of items, then assign all collection to a variable. And, finally pass that variable to a sortable constructor. Take a look at the following syntax to create a sortable object.

Syntax

var sortableListsArray = $$('#listA, #listB');
var sortableLists = new Sortables(sortableListsArray);

The following is the HTML code for the syntax.

Syntax

<ul id = "listA">
   <li>Item A1</li>
   <li>Item A2</li>
   <li>Item A3</li>
   <li>Item A4</li>
</ul>

<ul id = "listB">
   <li>Item B1</li>
   <li>Item B2</li
   <li>Item B3</li>
   <li>Item B4</li>
</ul>

Sortables Option

Sortable provides different options to customize the sortable object. Let us discuss the options.

Constrain

This option determines whether the list elements can jump between uls within the sortable object. For example, if you have two uls in the sortable object, you can "constrain" the list items to their parent ul by setting "constrain: true". Take a look at the following syntax for setting constrain.
Syntax

var sortableLists = new Sortables(sortableListsArray, {
   constrain: true //false is default
});

Clone

This option helps you to create a clone element under your cursor. It helps in sorting the list elements. Take a look at the following syntax for clone.
Syntax

var sortableLists = new Sortables(sortableListsArray, {
   clone: true //false is default
});

Handle

Handle is an option that accepts an element to act as the drag handle. This is useful whenever you want your list items selectable or you want any actions in your list. If you are not providing any variable it will be considered as false by default. Take a look at the following syntax for using handle.
Syntax

var handleElements = $$('.handlesClass');
var sortableLists = new Sortables(sortableListsArray, {
   handle: handleElements //false is default
});

Opacity

This option lets you adjust the sort element. If you use a clone, opacity affects the element that sorts.
Syntax

var sortableLists = new Sortables(sortableListsArray, {
   opacity: 1 //default is 1
});

Revert

This option accepts either "false" or any Fx option. If you set Fx option within revert, it will create an effect for the sorted element to settle into place. Take a look at the following syntax for revert.
Syntax

var sortableLists = new Sortables(sortableListsArray, {
   revert: false //this is the default
});

//you can also set Fx options
var sortableLists = new Sortables(sortableListsArray, {
   revert: {
      duration: 50
   }
});

Snap

This option lets you see how many px the user will drag the mouse before the element starts following.
Syntax

var sortableLists = new Sortables(sortableListsArray, {
   snap: 10 //user will have to drag 10 px to start the list sorting
});

Sortable Events

Sortable provides the following events that are nice and straight forward.

• onStart − executes when the drag starts (once snap kicks over)
• onSort − executes when the items change order
• onComplete − executes when you drop an element in place

Sortable Methods

The following sortable methods are essentially functions that belong to classes −

detach()

With detach(), you can “detach” all the current handles, making the entire list object not sortable. This is useful for disabling sort.

attach()

This method will “attach” the handles to the sort items, works to enable sorting after detach().

addItems()

This allows you to add new items to your sortable list. Let’s say that you have a sortable list where the user can add a new item, once you add that new item, you will need to enable sorting on that new item.

removeItems()

This method lets you remove the sorting capability of an item within a sortable list. This is useful when you want to lock a particular item within a specific list and not let it sort with others.

addLists()

Instead of just adding a new item to an existing list, you may want to add a whole new list to the sortable object. This method lets you add multiple lists, making it really easy to add more sortables.

removeLists()

Let us remove the lists from the sortable object. This is useful for when you want to lock a particular list in place. You can remove the list, leaving the other lists still in the object sortable, but locking the content of the removed list.

serialize()

All of that sorting is great, but what if you want to do something with the data? .serialize(); will return a list of the item ids as well as their order on the list. You can choose which list to get data from within the object by index number.

Example

The following example creates an array of div elements with numbering. Later, rearrange those by click, drag, and drop actions using mouse pointer. Take a look at the following code.

<!DOCTYPE html>
<html>
   
   <head>
      <style>
         #test {
            position: inherit;
         }
         ul#sortables {
            width: 300px;
            margin: 0;
            padding: 0;
         }
         li.sortme {
            padding: 4px 8px;
            color: #fff;
            cursor: pointer;
            list-style: none;
            width: 300px;
            background-color: #222;
            border: 1px solid;
         }
         ul#sortables li {
            margin: 10px 0;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            new Sortables($('test'), {
               initialize: function(){
                  var step = 0;
                  
                  this.elements.each(function(element, i) {
                     var color = [step, 82, 87].hsbToRgb();
                     element.setStyle('background-color', color);
                     step = step + 35;
                     element.setStyle('height', $random(40, 100));
                  });
               }
            });
         });
      </script>
   </head>
   
   <body>
      <ul id = "test">
         <li class = "sortme">0</li>
         <li class = "sortme">1</li>
         <li class = "sortme">2</li>
         <li class = "sortme">3</li>
         <li class = "sortme">4</li>
         <li class = "sortme">5</li>
         <li class = "sortme">6</li>
         <li class = "sortme">7</li>
         <li class = "sortme">8</li>
         <li class = "sortme">9</li>
         <li class = "sortme">10</li>
      </ul>
   </body>
   
</html>

You will receive the following output −

Output