HTML5 and jQuery Sortable

If you’re a developer, you know the feeling of a constant infatuation with learning new methods, strategies and languages. Earlier this year, I posted an introduction to HTML5 via game programming and I thought to myself, "There has to be a more practical use for this in my daily work". Thus my research began.

When searching for new jQuery plugins, I tend to spend hours, if not days sifting through options and comparing the pros and cons of each plugin. During one such research binge a particular plugin caught my eye.
I found a nifty plugin called HTML5 Sortable, which combines with jQuery to create flexible sortable lists. The best part: it’s only 1kB gzipped and minified, which is WAY better than the average 35-40kB of other sorting plugins. Remember: each kB adds just a tiny bit of overhead to your page. So unless you need extra functionality a HUGE and incredibly versatile sorting plugin offers, it’s best to minify as much as you can.

As usual, let’s start with our jQuery library include (courtesy of Google Hosted APIs):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Now to create our HTML5 list, which will allow users to drag and drop <li> elements with help from our jQuery:

<section>
      <h1> This Is Our List </h1>
      <ul class = ”sortable”>
            <li draggable=”true”> First Item </li>
            <li draggable=”true”> Second Item </li>
            <li draggable=”true”> Third Item </li>
            <li draggable=”true”> Fourth Item </li>
            <li draggable=”true”> Fifth Item </li>
            <li draggable=”true”> Sixth Item </li>
      </ul>
</section>

Our nifty little list is nothing more than a plain ole unordered list, so let’s add the magic that will make it sortable!
Notice we added the class “sortable” to our <ul> element, this is what we use to identify it to the jQuery script:

<script type=text/javascript”>
      $(function() {
            $(‘.sortable’).sortable();
      });
</script>

Give it a try! It will now let you drag and drop any of the <li> elements in our list. But wait… there’s one problem! How do we do anything once they’ve sorted the list?
Let’s add a bind() to our sortable() function. This way we can detect when a change occurs and act accordingly:

<script type=text/javascript”>
      $(function() {
            $(‘.sortable’).sortable().bind(‘sortupdate’, function() {
                  alert(‘the list has been reordered!’);
                  // Do other stuff here to store the order, display a message, anything
            });
      });
</script>

Now we know how to create the sortable list and how to add an action to it. Keep an eye out for future blogs! Who knows, maybe we’ll turn this into a full-scale interactive application!