Developpement Informatique

février 22, 2010

jQuery Sortable Lists With Drag Drop Handle

Filed under: JQuery — izaam01 @ 1:07

this post has been extended in the new Extending the jQuery Sortable With Ajax & MYSQL post

I’ve recently made use of a drag / drop style list that will remember the order of the list. If you use the standard jQuery sortable items, you’ll get the two following problems:

  1. You won’t be able to click on any items in the sortable list you have
  2. You’ll probably want an update of the order of the list after every change.

I did find a solution to the problem over at Scott Sauyet’s site, but I needed a little more… The following example will do both, it uses the handle and update options on the .sortable item. By adding these simple items you can produce a pretty advanced sortable list. You could even add AJAX into that update command and automatically update your database with the new values every time you change then removing the need to refresh, and that’s very web 2.0.


I’ve ‘enhanced’ it ever so slightly by adding in some styles for the list items and handles.

First we’ll look at the CSS:

  #test-list { list-style: none; padding: 0; margin: 0 40px; } 
  #test-list li { margin: 0 0 10px 0; background: #eaf3fa; padding: 15px; } 
  #test-list .handle { float: left; margin-right: 10px; cursor: move; } 
  #test-log { padding: 5px; border: 1px solid #ccc; } 

Then we need to include jQuery and the jQuery UI

<script type="text/javascript" src="{ latest jquery release }"></script> 
<script type="text/javascript" src="{ ui core }"></script> 
<script type="text/javascript" src="{ ui sortable }"></script> 

We then tell the document to automatically handle the list when it’s ready

<script type="text/javascript">// When the document is ready set up our sortable with it's inherant function(s) 
$(document).ready(function() { 
    handle : '.handle', 
    update : function () { 

Now to build the HTML:

<ul id="test-list"> 
    <li id="listItem_1"> 
    <img src="arrows.png" alt="move" /> 
      Item 1 with a link to <a href="" rel="nofollow">Google</a> 
    <li id="listItem_2"> 
      <img src="arrow.png" alt="move" /> 
      Item 2 
    <li id="listItem_3"> 
      <img src="arrow.png" alt="move" /> 
      Item 3 
    <li id="listItem_4"> 
      <img src="arrow.png" alt="move" /> 
      Item 4 
      <p>Perhaps you want to add a form in here?</p> 
      <p>Text:<br /><input type="text" /></p> 
      <p>And a textarea<br /><textarea></textarea></p> 
<label for="test-log"><strong>Resultant order of list</strong></label> 
<input type="text" size="70" id="test-log" />

One important thing to remember, that might have you stumbling is that you HAVE to name the list items as such id=“item_1” that underscore and number will define the elements in the array past out to the text box.

Experiment, enjoy.


Laisser un commentaire »

Aucun commentaire pour l’instant.

RSS feed for comments on this post. TrackBack URI

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:


Vous commentez à l'aide de votre compte Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )


Connexion à %s

Propulsé par

%d blogueurs aiment cette page :