1: The Sortable component can turn a set of elements on the page into a sortable . It can be used to define a sortable list of elements. Then, drag the mouse to Adjust the position of elements in the list
$('.selector').sortable(options);
Simple example:

Copy code The code is as follows:

sortable component</ title><br><script language="javascript" src="js/jquery-1.4.2.min.js"></script><br><script type="text/javascript" src= "js/jquery.ui.core.js"></script><br><script type="text/javascript" src="js/jquery.ui.widget.js"></script> ;<BR><script type="text/javascript" src="js/jquery.ui.mouse.js"></script><br><script type="text/javascript" src=" js/jquery.ui.sortable.js"></script><br><link href="CSS/base/jquery.ui.all.css" rel="stylesheet" type="text/css" /><br><style type="text/css"><br>body {<br> text-align:center;<br> margin:0 auto;<br> padding:0;<br> }<br>#wrap {<br> margin: 10px auto 10px auto;<br> padding: 5px;<br> width: 450px;<br> height:300px;<br> background: #fff;<br> border : 5px solid #000;<br>}<br>h1 {<br> color:#006;<br> font-size:24px;<br> font-weight:bold;<br> margin-bottom:2px; <br> text-align:center;<br>}<br>#sortable {<br> list-style-type: none;<br> margin: 0;<br> padding: 0;<br> width: 100 %;<br>}<br>#sortable li {<br> margin: 3px;<br> padding: 0.4em;<br> font-size: 16px;<br> height: 18px;<br>}<br>#sortable li span {<br> position: absolute;<br> margin-left: -1.3em;<br>}<br></style><br><script type="text/javascript"> ;<br> $(document).ready(function(){<br> $("#sortable").sortable(); // Turn sortable into sortable <br> $("#sortable"). disableSelection(); //Make text unselectable<br> });<br></script><br></head><br><body><br><div id="wrap "><br> <h1>Drag the mouse to adjust the order of the following options</h1><br> <ul id="sortable"><br> <li class="ui-widget-content ">Monday</li><br> <li class="ui-widget-content">Tuesday</li><br> <li class="ui-widget-content"> Wednesday</li><br> <li class="ui-widget-content">Thursday</li><br> <li class="ui-widget-content">Friday</ li><br> <li class="ui-widget-content">Saturday</li><br> <li class="ui-widget-content">Saturday</li><br> </ul><br></div><br></body><br></html><br> </div> <br><strong>Rendering: <br></strong> <img alt="" src="http://files.jb51.net/file_images/article/201306/2013061916300628.png"><br><strong><font style="max-width:90%">2: Associated sorted list <br></font></strong>Usually sorting two or more lists at the same time is called an associated sorted list, and use the attribute connectWidth to set one selector, so that you can specify the order in which elements are moved between different lists <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="75215" class="copybut" id="copybut75215" onclick="doCopy('code75215')"><u>Copy the code</u></a></span> The code is as follows:</div> <div class="codebody" id="code75215"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br><html xmlns="http://www.w3.org/1999/xhtml"><br><head><br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br><title>sortable组件

菠萝蛋糕

人品计算器

我的恐怖小屋

品茗闻香话茶道

暴打火柴人中文版

动作类小游戏

;Grand Slam Final

Rendering:

3: Method of sorting components

3.1 serialize method:
This method can serialize the id attribute of the sortable element into a The form or Ajax string that can be submitted has the following syntax:
$("#sortable").sortable(serialize", [options]);
3.2 toArray method: This method serializes the id of the sortable element into a string array. The syntax format is as follows:
$("#sortable").sortable("toArray");
3.3 refresh method: The method is used to refresh the sortable list
$("#sortable").sortable("refresh");
3.4 refreshPositons method :This method is used to refresh the cache position of sortable elements. The syntax format is as follows:
$("#sortable").sortable("refreshPositions");
3.5 cancel: The method is used to cancel the order change of elements in the current sortable object
$("#sortable").sortable("cancel");

Copy code

The code is as follows:

sortable组件

调整下列课程的安排顺序

1.1 链接外部.JS文件

1.2 使用Microsoft脚本编辑器

1.3 使用while循环

1.4 使用for循环

2.1 使用Switch语句

2.2 使用Array对象属性

2.3 使用String对象的方法

2.4 使用Date对象的方法

Rendering:

Here att is used as the key, and the value is the string defined with att in the layout.
4: Sorting time callback function
You can control the sorting operation more flexibly by defining a callback function
4.1 start: Event type is sortstart, triggers when sorting starts
4.2 sort: event type is sort, triggers during sorting process
4.3 change: event type is sortchange, during sorting process , triggered when the position of the element changes
4.4 beforestop: The event type is sortbeforestop, triggered when sorting is stopped but placeholders or auxiliary elements are still available
4.5 stop: The event type is sortstop, which is triggered when the sorting process stops.
4.6 update: The event type is sortupdate, which is triggered when the sorting process is stopped and the element position has changed.
4.7 receive: event type is sortreceive, triggered when the connected sorted list has received an element from another list
4.8 remove: event type is sortremove, triggered when an element is removed from the list Triggered when sorting elements and placing them into another list
4.9 over: The event type is sortover, triggered when a sortable element is moved to another connected list
4.10 out: The event type is sortout, which is triggered when a sortable element is removed from the connected list.
4.11 activate: The event type is sortactivate, which is triggered when a connected sorted list is used. Each The connection list receives this event when dragging starts
4.12 deactivate: The event type is sortdeactivate, which is triggered when the sorting operation is stopped. This event will be propagated to all possible connection lists

Copy code The code is as follows:

 $("#droppable").droppable({
 eventName: function (event, ui) {
 }
}); 

ui is a jQuery object containing additional information. The jQuery object has the following properties
helper: A jQuery object, representing the current element to be sorted
position: An object containing the top attribute and left attribute, indicating the position of the current element relative to the original object
offset: An object containing top and left attributes, indicating the absolute position of the current element relative to the page
item: Representing the currently dragged jQuery object
placeholder: Represents the defined placeholder
sender: The sorted list to which the currently dragged element belongs, only applicable to moving between two lists

Copy code The code is as follows:

sortable组件

改变下面列车的顺序，查看事件触发结果

K22次 始发站：桂林 -> 终点站：北京西 

K180次 始发站：郑州 -> 终点站：北京西 

K1038次  郑州  -> 终点站：深圳

K236次  石家庄  -> 终点站：上海 

T182次 汉口  -> 终点站：哈尔滨

K926次  郑州  -> 终点站：哈尔滨

In-depth analysis of jQuery's sorting component_jquery

调整下列课程的安排顺序

改变下面列车的顺序，查看事件触发结果