In-depth analysis of jQuery's sorting component_jquery

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:

Drag the mouse to adjust the order of the following options

• Monday

 
• Tuesday

 
• Wednesday


• Thursday


• Friday li>
  
• Saturday


• Saturday

Rendering:
 
2: Associated sorted list
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

Copy the code The code is as follows:

 

   

     

休闲类小游戏

      ×

   

     
• 菠萝蛋糕

     
• 人品计算器

     
• 我的恐怖小屋

     
• 品茗闻香话茶道

     
• 暴打火柴人中文版

   

 

 

   

     

动作类小游戏

                                                                                                              
                                                                                                                                           ;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:

 

调整下列课程的安排顺序

 

   
• 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:

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

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

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

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

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

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

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