【JQuery】排序组件

1：排序(Sortable)组件能够将页面上的一组元素变成可排序的

可用于定义一个可排序的元素列表，而后，经过拖动鼠标能够调整元素在列表中的位置

$('.selector').sortable(options);  

2：关联排序列表

一般将两个以上的列表同时进行排序称为关联排序列表，利用属性connectWidth设置一个选择符，这样就能够指定在不一样的列表之间移动元素的顺序。

3：排序组件的方法  
3.1 serialize方法：该方法能够将可排序元素的id属性序列化为一个可提交的表单或者Ajax字符串，语法格式以下：
    $("#sortable").sortable(serialize", [options]);
3.2 toArray方法：该方法将可排序元素的id序列化为一个字符串数组，语法格式以下：
    $("#sortable").sortable("toArray");
3.3 refresh方法：方法用于刷新可排序列表
    $("#sortable").sortable("refresh");
3.4 refreshPositons方法：该方法用于刷新可排序元素的缓存位置，语法格式以下：
    $("#sortable").sortable("refreshPositions");
3.5 cancel：方法用于取消当前可排序对象中元素的顺序改变
    $("#sortable").sortable("cancel");

4：排序时间回调函数
能够经过定义回调函数来更灵活的控制排序操做
4.1 start: 事件类型为sortstart, 在开始排序时触发
4.2 sort: 事件类型为sort, 在排序过程当中触发
4.3 change：事件类型为sortchange, 在排序过程当中，当元素的位置发生改变时触发
4.4 beforestop: 事件类型为sortbeforestop，当中止排序但占位符或者辅助元素仍然可用时触发
4.5 stop：事件类型为sortstop,当排序过程中止时触发
4.6 update: 事件类型为sortupdate, 当中止排序过程且元素位置已经发生变化时触发
4.7 receive: 事件类型为sortreceive，当链接的排序列表已从另外一个列表接收到一个元素时触发
4.8 remove: 事件类型为sortremove, 当从列表中移出一个可排序元素并将其放置到另外一个列表时触发
4.9 over: 事件类型为sortover, 当一个可排序元素被移动到另外一个链接列表中时触发
4.10 out: 事件类型为sortout, 当一个可排序元素被移出链接列表时触发

4.11 activate: 事件类型为sortactivate, 当使用链接的排序列表时触发，每一个链接列表在拖动开始时均接收此事件
4.12 deactivate: 事件类型为sortdeactivate, 当中止排序操做时触发，此事件将传播到全部可能的链接列表

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

ui是一个包含附加信息的jQuery对象，该jQuery对象具备一下属性
helper: 一个jQuery对象，表示当前要排序的元素
position: 一个包含top属性和left属性的对象，表示当前元素相对于原始对象的位置
offset:  一个包含top属性和left属性的对象，表示当前元素相对于页面的绝对位置
item: 表示当前拖动的jQuery对象
placeholder: 表示定义的占位符
sender: 当前拖动元素所属的排序列表，仅适用于两个列表之间移动的状况