jQuery UI example - sorting (Sortable)
Use the mouse to adjust the sorted list or grid elements.
For more details about the sortable interaction, see the API documentation sortable widgets (Sortable the Widget) .
The default function
Sortable feature is enabled on any DOM element. Click and drag the mouse to the list of elements of a new location, other items will be automatically adjusted. By default, sortable each entry shared draggable attribute.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI sorting (Sortable) - The default function </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#sortable {list-style-type: none; margin: 0; padding: 0; width: 60%;}
#sortable li {margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px;}
#sortable li span {position: absolute; margin-left: -1.3em;}
</ Style>
<Script>
$ (Function () {
$ ( "#sortable") .sortable ();
$ ( "#sortable") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul id = "sortable">
<Li class = "ui-state-default"> <span class = "ui-icon ui-icon-arrowthick-2-ns"> </ span> Item 1 </ li>
<Li class = "ui-state-default"> <span class = "ui-icon ui-icon-arrowthick-2-ns"> </ span> Item 2 </ li>
<Li class = "ui-state-default"> <span class = "ui-icon ui-icon-arrowthick-2-ns"> </ span> Item 3 </ li>
<Li class = "ui-state-default"> <span class = "ui-icon ui-icon-arrowthick-2-ns"> </ span> Item 4 </ li>
<Li class = "ui-state-default"> <span class = "ui-icon ui-icon-arrowthick-2-ns"> </ span> Item 5 </ li>
<Li class = "ui-state-default"> <span class = "ui-icon ui-icon-arrowthick-2-ns"> </ span> Item 6 </ li>
<Li class = "ui-state-default"> <span class = "ui-icon ui-icon-arrowthick-2-ns"> </ span> Item 7 </ li>
</ Ul>
</ Body>
</ Html>
Connection List
By the connectWith passing a selector option to put a list of the elements in the sorted list to another, and vice versa. The easiest way is with a list of all relevant groups of a CSS class, and then pass the class to the sortable function (eg, connectWith: '.myclass' ).
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI sorting (Sortable) - connection list </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
# Sortable1, # sortable2 {list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px;}
# Sortable1 li, # sortable2 li {margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px;}
</ Style>
<Script>
$ (Function () {
$ ( "# Sortable1, # sortable2") .sortable ({
connectWith: ".connectedSortable"
.}) DisableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul id = "sortable1" class = "connectedSortable">
<Li class = "ui-state-default"> Item 1 </ li>
<Li class = "ui-state-default"> Item 2 </ li>
<Li class = "ui-state-default"> Item 3 </ li>
<Li class = "ui-state-default"> Item 4 </ li>
<Li class = "ui-state-default"> Item 5 </ li>
</ Ul>
<Ul id = "sortable2" class = "connectedSortable">
<Li class = "ui-state-highlight"> Item 1 </ li>
<Li class = "ui-state-highlight"> Item 2 </ li>
<Li class = "ui-state-highlight"> Item 3 </ li>
<Li class = "ui-state-highlight"> Item 4 </ li>
<Li class = "ui-state-highlight"> Item 5 </ li>
</ Ul>
</ Body>
</ Html>
Connection List tab
By placing the top of the list items to the appropriate tab to put a list of the elements in the sorted list to another, and vice versa.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI sorting (Sortable) - tab connection list </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
# Sortable1 li, # sortable2 li {margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px;}
</ Style>
<Script>
$ (Function () {
$ ( "# Sortable1, # sortable2") .sortable () disableSelection ().;
var $ tabs = $ ( "#tabs") .tabs ();
var $ tab_items = $ ( "ul: first li", $ tabs) .droppable ({
accept: ".connectedSortable li",
hoverClass: "ui-state-hover",
drop: function (event, ui) {
var $ item = $ (this);
var $ list = $ ($ item.find ( "a") .attr ( "href"))
.find ( ".connectedSortable");
ui.draggable.hide ( "slow", function () {
$ Tabs.tabs ( "option", "active", $ tab_items.index ($ item));
$ (This) .appendTo ($ list) .show ( "slow");
});
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "tabs">
<Ul>
<Li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
<Li> <a href="#tabs-2"> Proin dolor </a> </ li>
</ Ul>
<Div id = "tabs-1">
<Ul id = "sortable1" class = "connectedSortable ui-helper-reset">
<Li class = "ui-state-default"> Item 1 </ li>
<Li class = "ui-state-default"> Item 2 </ li>
<Li class = "ui-state-default"> Item 3 </ li>
<Li class = "ui-state-default"> Item 4 </ li>
<Li class = "ui-state-default"> Item 5 </ li>
</ Ul>
</ Div>
<Div id = "tabs-2">
<Ul id = "sortable2" class = "connectedSortable ui-helper-reset">
<Li class = "ui-state-highlight"> Item 1 </ li>
<Li class = "ui-state-highlight"> Item 2 </ li>
<Li class = "ui-state-highlight"> Item 3 </ li>
<Li class = "ui-state-highlight"> Item 4 </ li>
<Li class = "ui-state-highlight"> Item 5 </ li>
</ Ul>
</ Div>
</ Div>
</ Body>
</ Html>
Delayed start
Delayed by the time delay and distance to prevent accidental sort. By delay milliseconds option must be set before the start of the drag of the sort. By distance pixels option must be set before the start of the drag of the sort.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI sorting (Sortable) - delayed start </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
# Sortable1, # sortable2 {list-style-type: none; margin: 0; padding: 0; margin-bottom: 15px; zoom: 1;}
# Sortable1 li, # sortable2 li {margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 95%;}
</ Style>
<Script>
$ (Function () {
$ ( "# Sortable1") .sortable ({
delay: 300
});
$ ( "# Sortable2") .sortable ({
distance: 15
});
$ ( "Li") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<H3 class = "docs"> time delay 300ms: </ h3>
<Ul id = "sortable1">
<Li class = "ui-state-default"> Item 1 </ li>
<Li class = "ui-state-default"> Item 2 </ li>
<Li class = "ui-state-default"> Item 3 </ li>
<Li class = "ui-state-default"> Item 4 </ li>
</ Ul>
<H3 class = "docs"> distance delay 15px: </ h3>
<Ul id = "sortable2">
<Li class = "ui-state-default"> Item 1 </ li>
<Li class = "ui-state-default"> Item 2 </ li>
<Li class = "ui-state-default"> Item 3 </ li>
<Li class = "ui-state-default"> Item 4 </ li>
</ Ul>
</ Body>
</ Html>
It is displayed as a grid
Let sortable entries are displayed as a grid, so that they use CSS with the same dimensions and the floating display.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI sorting (Sortable) - display a grid </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#sortable {list-style-type: none; margin: 0; padding: 0; width: 450px;}
#sortable li {margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center;}
</ Style>
<Script>
$ (Function () {
$ ( "#sortable") .sortable ();
$ ( "#sortable") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul id = "sortable">
<Li class = "ui-state-default"> 1 </ li>
<Li class = "ui-state-default"> 2 </ li>
<Li class = "ui-state-default"> 3 </ li>
<Li class = "ui-state-default"> 4 </ li>
<Li class = "ui-state-default"> 5 </ li>
<Li class = "ui-state-default"> 6 </ li>
<Li class = "ui-state-default"> 7 </ li>
<Li class = "ui-state-default"> 8 </ li>
<Li class = "ui-state-default"> 9 </ li>
<Li class = "ui-state-default"> 10 </ li>
<Li class = "ui-state-default"> 11 </ li>
<Li class = "ui-state-default"> 12 </ li>
</ Ul>
</ Body>
</ Html>
Place a placeholder
When dragging a sortable entry to a new location, the other entries will make room for the entry. Ask placeholder transfer option to define a class of blank visual style. Boolean values forcePlaceholderSize option to set the size of the placeholder.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI sorting (Sortable) - placed placeholder </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#sortable {list-style-type: none; margin: 0; padding: 0; width: 60%;}
#sortable li {margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em;}
html> body #sortable li {height: 1.5em; line-height: 1.2em;}
.ui-state-highlight {height: 1.5em; line-height: 1.2em;}
</ Style>
<Script>
$ (Function () {
$ ( "#sortable") .sortable ({
placeholder: "ui-state-highlight"
});
$ ( "#sortable") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul id = "sortable">
<Li class = "ui-state-default"> Item 1 </ li>
<Li class = "ui-state-default"> Item 2 </ li>
<Li class = "ui-state-default"> Item 3 </ li>
<Li class = "ui-state-default"> Item 4 </ li>
<Li class = "ui-state-default"> Item 5 </ li>
<Li class = "ui-state-default"> Item 6 </ li>
<Li class = "ui-state-default"> Item 7 </ li>
</ Ul>
</ Body>
</ Html>
Processing empty list
By Option is set false , to prevent a list of all of the entries are placed into a separate empty list. By default, sortable entries can be placed into an empty list.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI sorting (Sortable) - handling empty list </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
# Sortable1, # sortable2, # sortable3 {list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;}
# Sortable1 li, # sortable2 li, # sortable3 li {margin: 5px; padding: 5px; font-size: 1.2em; width: 120px;}
</ Style>
<Script>
$ (Function () {
$ ( "Ul.droptrue") .sortable ({
connectWith: "ul"
});
$ ( "Ul.dropfalse") .sortable ({
connectWith: "ul",
dropOnEmpty: false
});
$ ( "# Sortable1, # sortable2, # sortable3") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul id = "sortable1" class = "droptrue">
<Li class = "ui-state-default"> can be placed .. </ li>
<Li class = "ui-state-default"> .. an empty list </ li>
<Li class = "ui-state-default"> Item 3 </ li>
<Li class = "ui-state-default"> Item 4 </ li>
<Li class = "ui-state-default"> Item 5 </ li>
</ Ul>
<Ul id = "sortable2" class = "dropfalse">
<Li class = "ui-state-highlight"> can not be placed .. </ li>
<Li class = "ui-state-highlight"> .. an empty list </ li>
<Li class = "ui-state-highlight"> Item 3 </ li>
<Li class = "ui-state-highlight"> Item 4 </ li>
<Li class = "ui-state-highlight"> Item 5 </ li>
</ Ul>
<Ul id = "sortable3" class = "droptrue">
</ Ul>
<br style="clear:both">
</ Body>
</ Html>
Include / Exclude entry
Designated by the items pass a jQuery selector options which items can be sorted. This option is outside the project can not be ordered, but they are not valid target sortable entry.
If you want to prevent specific entries sorted, to cancel the option to pass a jQuery selector. Canceled entry is still valid sorting target other entries.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI sorting (Sortable) - Include / Exclude entry </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
# Sortable1, # sortable2 {list-style-type: none; margin: 0; padding: 0; zoom: 1;}
# Sortable1 li, # sortable2 li {margin: 0 5px 5px 5px; padding: 3px; width: 90%;}
</ Style>
<Script>
$ (Function () {
$ ( "# Sortable1") .sortable ({
items: "li: not (.ui-state-disabled)"
});
$ ( "# Sortable2") .sortable ({
cancel: ".ui-state-disabled"
});
$ ( "# Sortable1 li, # sortable2 li") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<H3 class = "docs"> specify which items are sortable: </ h3>
<Ul id = "sortable1">
<Li class = "ui-state-default"> Item 1 </ li>
<Li class = "ui-state-default ui-state-disabled"> (I'm not sortable or a drop target) </ li>
<Li class = "ui-state-default ui-state-disabled"> (I'm not sortable or a drop target) </ li>
<Li class = "ui-state-default"> Item 4 </ li>
</ Ul>
<H3 class = "docs"> cancel order (but as a drop target): </ h3>
<Ul id = "sortable2">
<Li class = "ui-state-default"> Item 1 </ li>
<Li class = "ui-state-default ui-state-disabled"> (I'm not sortable) </ li>
<Li class = "ui-state-default ui-state-disabled"> (I'm not sortable) </ li>
<Li class = "ui-state-default"> Item 4 </ li>
</ Ul>
</ Body>
</ Html>
Portal components (Portlets)
Enable portal components (styled div) as sortable, and use connectWith option to allow communication between the sort columns.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI sorting (Sortable) - portal components (Portlets) </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
body {
min-width: 520px;
}
.column {
width: 170px;
float: left;
padding-bottom: 100px;
}
.portlet {
margin: 0 1em 1em 0;
padding: 0.3em;
}
.portlet-header {
padding: 0.2em 0.3em;
margin-bottom: 0.5em;
position: relative;
}
.portlet-toggle {
position: absolute;
top: 50%;
right: 0;
margin-top: -8px;
}
.portlet-content {
padding: 0.4em;
}
.portlet-placeholder {
border: 1px dotted black;
margin: 0 1em 1em 0;
height: 50px;
}
</ Style>
<Script>
$ (Function () {
$ ( ".column") .sortable ({
connectWith: ".column",
handle: ".portlet-header",
cancel: ".portlet-toggle",
placeholder: "portlet-placeholder ui-corner-all"
});
$ ( ".portlet")
.addClass ( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find ( ".portlet-header")
.addClass ( "ui-widget-header ui-corner-all")
.prepend ( "<span class = 'ui-icon ui-icon-minusthick portlet-toggle'> </ span>");
$ ( ".portlet-Toggle") .click (function () {
var icon = $ (this);
icon.toggleClass ( "ui-icon-minusthick ui-icon-plusthick");
icon.closest ( ".portlet") .find ( ".portlet-content") .toggle ();
});
});
</ Script>
</ Head>
<Body>
<Div class = "column">
<Div class = "portlet">
<Div class = "portlet-header"> Subscribe </ div>
<Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
<Div class = "portlet">
<Div class = "portlet-header"> news </ div>
<Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
</ Div>
<Div class = "column">
<Div class = "portlet">
<Div class = "portlet-header"> cart </ div>
<Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
</ Div>
<Div class = "column">
<Div class = "portlet">
<Div class = "portlet-header"> link </ div>
<Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
<Div class = "portlet">
<Div class = "portlet-header"> Image </ div>
<Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </ div>
</ Div>
</ Div>
</ Body>
</ Html>