How to order the elements with jQuery (1/2)

order elements with jQuery

In this article we’ll treat the fascinating and always increasingly used the technique of the item ordering in an html document. The classical example could be the management of WordPress widgets.
To activate a widget we have to drag it in the sidebar with a drag and drag operation as described in this article. To decide the order in which it will appear I’ll drag it (up or down) until the desired postion is reached.

Even this last one is basically a drag and drop operation, but it’s such a particular case that jQuery puts at our disposal a specific method that like always helps us  save time, that is the sortable () method.
This method applied to a group of items, makes them orderable like in this example. Let’s see how it works.

We begin with creating the index.php page in this way:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Order elements with jQuery | Your Inspiration Web</title>
</head>
<body>
    <ul id="list">
        <li id="item_1">Element 1</li>
        <li id="item_2">Element 2</li>
        <li id="item_3">Element 3</li>
        <li id="item_4">Element 4</li>
        <li id="item_5">Element 5</li>
    </ul>
</body>
</html>

Notice the format of the id f the items of the list. It’s important that it’s in this way (nameAlwaysThe same_numberAlwaysDifferent) and we’ll see why in the next article.
Now we create the style sheet screen.css and define some classes:

ul{
list-style-type: none;
}

li.item{
border: 1px solid black;
padding: 15px;
width: 250px;
margin-bottom: 10px;
background-color: #E1E1E1;
cursor: move;
}

We simply defined the list in order that it appears as a series of blocks. In addition, the mouse cursor has been redefined in order that it’s immediately clear that these blocks can be moved (usability).

Now we proceed with connecting this style sheet in the header of  index.php:

<link href="screen.css" rel="stylesheet" type="text/css" />

At this point we recall the necessary libraries which are jQuery, ui.core, ui widget, ui.mouse and of course ui.sortable.

<script type="text/javascript" src="jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery/ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="jquery/ui/jquery.ui.sortable.js"></script>

I would like to point out a small thing.  In reality it shouldn’t be done in this way, including one by one all the necessary libraries;  in this article we’ll do it only for teaching purposes.
You must know that the guys of the jQuery team were so kind in creating for us a customized file according to our needs. In fact if you go to the download area of the user’s interface of jQuery you can see that all the plugins have been selected.  Clicking on “deselect all components” and selecting only sortable, sortable and the dependencies necessary get selected.
Now clicking on download , you can download your personalized package. In the js folder you’ll find jQuery (latest version) compressed and a file named jquery-ui-xxx-custom-min.js that is nothing but the plugin you need with all the dependencies integrated (also compressed). Don’t need nothing else.

Having said this, we can continue in defining the jQuery function:

<script type="text/javascript">
    $(document).ready(function(){
        //Here will write the jQuery code
    });

At this point our index.php page should be like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="jquery/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="jquery/ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="jquery/ui/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="jquery/ui/jquery.ui.mouse.js"></script>
    <script type="text/javascript" src="jquery/ui/jquery.ui.sortable.js"></script>
    <link href="screen.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(document).ready(function(){
            //qui scriveremo il codice jQuery
        });
    </script>
    <title>Order elements with jQuery | Your Inspiration Web</title>
</head>
<body>
    <div id="container">
        <ul id="list">
            <li id="item_1">Element 1</li>
            <li id="item_2">Element 2</li>
            <li id="item_3">Element 3</li>
            <li id="item_4">Element 4</li>
            <li id="item_5">Element 5</li>
        </ul>
    </div>
</body>
</html>

Good, at this point all we need to do is apply the sortable method to the list #list. In this way:

$("#list").sortable();

As you can see the elements are now orderable.

Order the elements with jQuery: Adding a couple of parameters

As in the drag and droop operation, also the sortable method provides us with the axis parameter  that constrains the movement on one single axis . In our case, we’ll constrain the movement only to the axis y, as follows:

$("#list").sortable({
    axis: "y"
});

Besides this it seems really nice that during the dragging, the dragged item becomes opaque. To do this, sortable provides us with  the opacity parameter that we’ll set on 0.5.


$("#list").sortable({
    opacity:0.5,
    axis: "y"
});

Conclusion

In this article we saw how easily jQuery allows us to implement the ordering functionalities. But… there’s  a but.
In this way it’s just a cute trick with a little value. In fact our ordering takes place only on the client’s side. If we reload the page, the items will be sorted  as they were in the beginning. But then ,how can we catch the new ordainment and above all make it permanent?
This will be the argument of the next article, that will inevitable more complicated. In fact, we’ll have to intercept the new ordainment and send it to the server to register it; therefore we’ll need PHP and MySql.  But you already knew this.
Save the file created up to here as we’ll start from here.

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: ,

The Author

Maurizio is married to the triad PHP - MySql - Apache and, not enough, he has a lover called jQuery. He has a blog where he tries to describe in detail all of "his lovers". His real specialty is the realization of large business application, altough he never refuses the commitment of a website.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

5 comments

Trackback e pingback

  1. How to order the elements with jQuery
    [...] How to order the elements with jQuery [...]
  2. How to order the elements with jQuery | Obsessed By
    [...] How to order the elements with jQuery [...]
  3. How to order the elements with jQuery (2/2) | Your Inspiration Web
    [...] the previous article we saw how the sortable method allows the sorting of a list of items through dragging. …
  4. Element with jquery |Avnish Namdev
    [...] [ 3 Comments ] [...]

Leave a Reply

Current month ye@r day *