Continuing the jQuery UI: .sortable()

 The .sortable() plugin is another example of what makes jQuery so useful: it takes a job that would normally be a nightmare in normal JavaScript and simplifies it, in this case to just a single line. Not even a line, really - just 11 characters. Let's try an example:

Example 01: A Movable Feast

[Click here for the demo]  [Click here for exercise files]

As you can see from the above demo, it behaves very similar to what we did last week with the draggable and droppable plugins. After all, it's letting us drag and drop elements in the browser window. But this example does us one better: it keeps the elements sorted. Let's look at the code. A word of caution, though: it's rediculously easy.

The HTML is very straightforward. Here I have created a list of Ernest Hemingway novels that the user can reorder based on preference. Full disclosure: I haven't read any of these. I started A Movable Feast like 7 years ago, but I'll be honest: it was kind of boring. As far as the HTML is concerned, however, it's very Hemingway's prose:


  1. <!doctype html>
  2. <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
  3. <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
  4. <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
  5. <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
  6.  <meta charset="utf-8">
  7.  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title>
  8.  <meta name="description" content="">
  9.  <meta name="author" content=""> <meta name="viewport" content="width=device-width">
  10.  <link rel="stylesheet" href="css/style.css">
  11. <script src="/js/libs/modernizr-2.5.3.min.js"></script>
  12. </head>
  13.   <body>
  14.   <h3>A Movable Feast: List Your Favorite Hemingway Novels!</h3>
  15.   <ul>
  16.    <li>Old Man and the Sea</li>
  17.  <li>The Sun Also Rises</li>
  18.     <li>For Whom the Bell Tolls</li>
  19.     <li>A Movable Feast</li>
  20.     <li>A Farewell to Arms</li>
  21.   </ul>    
  22. <script src="/js/libs/jquery-1.7.2.min.js"></script>
  23. <script src="/js/libs/jquery-ui-1.8.19.custom.min.js"></script>
  24. <script src="/js/plugins.js"></script>
  25. <script src="/js/script.js"></script>
  26. </body>
  27. </html>

Note that we are including both the jQuery core AND the jQuery UI library above, just after the body content. The CSS is also pretty simple, just some styling to make it look presentable


  1. @charset "UTF-8";
  2. /* CSS Document */
  4. body{
  5.  font: "Lucida Sans Unicode", "Lucida Grande", Arial, sans-serif;
  6.  background: #FFF;
  7.  color: rgb(50, 50, 50);
  8.  margin: 0;
  9.  padding: 0;
  10. }
  12. h4 {
  13.  margin: 5px;
  14. }
  16. ul {
  17.  list-style: none;
  18.  width: 250px;
  19.  margin: 5px;
  20.  padding: 0px;
  21. }
  23. li {
  24.  background: grey;
  25.  color: white;
  26.  padding: 3px;
  27.  width: 250px;
  28.  border: 1px solid #CCC;
  29. }

And finally, the jQuery, which we will place in the js/script.js fle:


  1. $(document).ready(
  2.  function() {
  3.   $('ul').sortable();    
  4.  }
  5. );


Pretty simple, I know. All we're doing here upon $(document).ready() is calling an anonymous function that selects all <ul> tags and attaches the .sortable() plugin to each of them. This plugin essentially makes all children <li> tags draggable, but it also makes siblings reorder when a fellow list item is droped above or below them.