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'):
$("#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.4/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>
This event is triggered when sorting starts.
start event as an init option.
$( ".selector" ).sortable({
start: function(event, ui) { ... }
});start event by type: sortstart.
$( ".selector" ).bind( "sortstart", function(event, ui) {
...
});This event is triggered during sorting.
sort event as an init option.
$( ".selector" ).sortable({
sort: function(event, ui) { ... }
});sort event by type: sort.
$( ".selector" ).bind( "sort", function(event, ui) {
...
});This event is triggered during sorting, but only when the DOM position has changed.
change event as an init option.
$( ".selector" ).sortable({
change: function(event, ui) { ... }
});change event by type: sortchange.
$( ".selector" ).bind( "sortchange", function(event, ui) {
...
});This event is triggered when sorting stops, but when the placeholder/helper is still available.
beforeStop event as an init option.
$( ".selector" ).sortable({
beforeStop: function(event, ui) { ... }
});beforeStop event by type: sortbeforestop.
$( ".selector" ).bind( "sortbeforestop", function(event, ui) {
...
});This event is triggered when sorting has stopped.
stop event as an init option.
$( ".selector" ).sortable({
stop: function(event, ui) { ... }
});stop event by type: sortstop.
$( ".selector" ).bind( "sortstop", function(event, ui) {
...
});This event is triggered when the user stopped sorting and the DOM position has changed.
update event as an init option.
$( ".selector" ).sortable({
update: function(event, ui) { ... }
});update event by type: sortupdate.
$( ".selector" ).bind( "sortupdate", function(event, ui) {
...
});This event is triggered when a connected sortable list has received an item from another list.
receive event as an init option.
$( ".selector" ).sortable({
receive: function(event, ui) { ... }
});receive event by type: sortreceive.
$( ".selector" ).bind( "sortreceive", function(event, ui) {
...
});This event is triggered when a sortable item has been dragged out from the list and into another.
remove event as an init option.
$( ".selector" ).sortable({
remove: function(event, ui) { ... }
});remove event by type: sortremove.
$( ".selector" ).bind( "sortremove", function(event, ui) {
...
});This event is triggered when a sortable item is moved into a connected list.
over event as an init option.
$( ".selector" ).sortable({
over: function(event, ui) { ... }
});over event by type: sortover.
$( ".selector" ).bind( "sortover", function(event, ui) {
...
});This event is triggered when a sortable item is moved away from a connected list.
out event as an init option.
$( ".selector" ).sortable({
out: function(event, ui) { ... }
});out event by type: sortout.
$( ".selector" ).bind( "sortout", function(event, ui) {
...
});This event is triggered when using connected lists, every connected list on drag start receives it.
activate event as an init option.
$( ".selector" ).sortable({
activate: function(event, ui) { ... }
});activate event by type: sortactivate.
$( ".selector" ).bind( "sortactivate", function(event, ui) {
...
});This event is triggered when sorting was stopped, is propagated to all possible connected lists.
deactivate event as an init option.
$( ".selector" ).sortable({
deactivate: function(event, ui) { ... }
});deactivate event by type: sortdeactivate.
$( ".selector" ).bind( "sortdeactivate", function(event, ui) {
...
});Remove the sortable functionality completely. This will return the element back to its pre-init state.
Disable the sortable.
Enable the sortable.
Get or set any sortable option. If no value is specified, will act as a getter.
Set multiple sortable options at once by providing an options object.
Returns the .ui-sortable element.
Serializes the sortable's item id's into a form/ajax submittable string. Calling this method produces a hash that can be appended to any url to easily submit a new item order back to the server.
It works by default by looking at the id of each item in the format 'setname_number', and it spits out a hash like "setname[]=number&setname[]=number".
You can also give in a option hash as second argument to custom define how the function works. The possible options are: 'key' (replaces part1[] with whatever you want), 'attribute' (test another attribute than 'id') and 'expression' (use your own regexp).
If serialize returns an empty string, make sure the id attributes include an underscore. They must be in the form: "set_number" For example, a 3 element list with id attributes foo_1, foo_5, foo_2 will serialize to foo[]=1&foo[]=5&foo[]=2. You can use an underscore, equal sign or hyphen to separate the set and number. For example foo=1 or foo-1 or foo_1 all serialize to foo[]=1.
Serializes the sortable's item id's into an array of string. If you have
<ul id="a_sortable"><br> <li id="hello">Hello</li><br> <li id="goodbye">Good bye</li><br> </ul>
and do
var result = $('#a_sortable').sortable('toArray');
then
result[0] will contain "hello" and result[1] will contain "goodbye".
Refresh the sortable items. Custom trigger the reloading of all sortable items, causing new items to be recognized.
Refresh the cached positions of the sortables' items. Calling this method refreshes the cached item positions of all sortables. This is usually done automatically by the script and slows down performance. Use wisely.
Cancels a change in the current sortable and reverts it back to how it was before the current sort started. Useful in the stop and receive callback functions.
If the sortable item is not being moved from one connected sortable to another:
$(this).sortable('cancel');
will cancel the change.
If the sortable item is being moved from one connected sortable to another:
$(ui.sender).sortable('cancel');
will cancel the change. Useful in the 'receive' callback.
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.
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>.