jQuery UI Sortable

Overview

The jQuery UI Sortable plugin makes selected elements sortable by dragging with the mouse.

All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):

  • ui.helper - the current helper element (most often a clone of the item)
  • ui.position - current position of the helper
  • ui.offset - current absolute position of the helper
  • ui.item - the current dragged element
  • ui.placeholder - the placeholder (if you defined one)
  • ui.sender - the sortable where the item comes from (only exists if you move from one connected list to another)

Dependencies

  • UI Core
  • UI Widget
  • UI Mouse

Example

A simple jQuery UI Sortable.

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

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  
  <script>
  $(document).ready(function() {
    $("#sortable").sortable();
  });
  </script>
</head>
<body style="font-size:62.5%;">
  
<ul id="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>

</body>
</html>

Options

Events

Methods

Theming

The jQuery UI Sortable plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.sortable.css stylesheet that can be modified. These classes are highlighed in bold below.

Sample markup with jQuery UI CSS Framework classes

<ul class="ui-sortable">
   <li></li>
   <li class="ui-sortable-helper"></li>
   <li class="ui-sortable-placeholder"></li>
   <li></li>
</ul>

Note: This is a sample of markup generated by the sortable plugin, not markup you should use to create a sortable. The only markup needed for that is
<ul>
   <li></li>
   <li></li>
   <li></li>
</ul>.