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 "seriapze" that manages a pst of element ids and is useful for server side scripting.

Creating a New Sortable Object

First, we send the pst of items to a variable. If you want an array of the pst 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 = $$( #pstA, #pstB );
var sortableLists = new Sortables(sortableListsArray);

The following is the HTML code for the syntax.

Syntax

<ul id = "pstA">
   <p>Item A1</p>
   <p>Item A2</p>
   <p>Item A3</p>
   <p>Item A4</p>
</ul>

<ul id = "pstB">
   <p>Item B1</p>
   <p>Item B2</p
   <p>Item B3</p>
   <p>Item B4</p>
</ul>

Sortables Option

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

Constrain

This option determines whether the pst elements can jump between uls within the sortable object. For example, if you have two uls in the sortable object, you can "constrain" the pst 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 pst 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 pst items selectable or you want any actions in your pst. 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 pst 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 pst object not sortable. This is useful for disabpng 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 pst. Let’s say that you have a sortable pst 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 capabipty of an item within a sortable pst. This is useful when you want to lock a particular item within a specific pst and not let it sort with others.

addLists()

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

removeLists()

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

seriapze()

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

Example

The following example creates an array of span elements with numbering. Later, rearrange those by cpck, 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;
         }
         p.sortme {
            padding: 4px 8px;
            color: #fff;
            cursor: pointer;
            pst-style: none;
            width: 300px;
            background-color: #222;
            border: 1px sopd;
         }
         ul#sortables p {
            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 ), {
               initiapze: 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">
         <p class = "sortme">0</p>
         <p class = "sortme">1</p>
         <p class = "sortme">2</p>
         <p class = "sortme">3</p>
         <p class = "sortme">4</p>
         <p class = "sortme">5</p>
         <p class = "sortme">6</p>
         <p class = "sortme">7</p>
         <p class = "sortme">8</p>
         <p class = "sortme">9</p>
         <p class = "sortme">10</p>
      </ul>
   </body>
   
</html>

You will receive the following output −

Output