• Contents
  • Introduction
  • Downloads
  • Documentation

Sortable

Introduction

Download

There are currently no directly downloadable artifacts for this project - instead, you can get the source code directly from the repository at the link below:

http://github.com/olle/sortable

Documentation

The Sortable plugin degrades completely so we always assume the list is built up as a valid list, ordered from the server.

1. Build lists with valid and unique ids.

<ul class="sortable">
   <?php foreach ($items as $id => $name): ?>
   <li id="item-<?php echo $id ?>">
      <?php echo $name ?>
   </li>
   <?php endforeach ?>            
</ul>

The item- prefix will ensure valid (X)HTML.

2. Attach the plugin with an Ajax handler for sorting.

Using a jQuery selector you attach the plugin to the list element and it inserts the sorting buttons bound to an Ajax handler.

			
<script type="text/javascript">
   $('ul.sortable').sortable({
      handler : 'php/jquery.sortable.php'
   });
</script>

The handler will receive the posted parameters id, with the element id, and direction with either the value up or down.

3. Build an Ajax handler

The handler only needs to respond with a regular HTTP/1.1 200 OK, or in the case that sorting couldn't be done HTTP/1.1 405 Method Not Allowed. Don't forget to do the actual sorting and storing of the results on the server.

Customization

Options to the Sorting plugin can be easily passed in the call. The current options and their default values are:

handler : 'php/jquery.sortable.php'
upClass : 'up'
downClass : 'down'
sorterClass : 'sorting'
  

Below is an iframed example of how a sortable list can be used. Hover over the list items to reveal the sorting buttons and simply click to sort.