HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
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) .
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 = "https://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>
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 = "https://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>
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 = "https://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 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 = "https://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>
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 = "https://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>
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 = "https://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>
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 = "https://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 /en </ li> <Li class = "ui-state-default"> /en 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 /en </ li> <Li class = "ui-state-highlight"> /en 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>
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 = "https://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>
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 = "https://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>