【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: 當前拖動元素所屬的排序列表，僅適用於兩個列表之間移動的狀況