jQuery之排序組件的深入解析_jquery

1：排序(Sortable)元件可以將頁面上的一組元素變成可排序的，可用於定義一個可排序的元素列表，然後，透過拖曳滑鼠可以調整元素在列表中的位置
$('.selector').sortable(options);   
簡單實例：

複製代碼 代碼如下:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

拖曳滑鼠調整下列選項的順序

 

    星期一
   
• 星期二

   
• 星期三

   
• 星期四

   
• 星期五


• 星期六

   
• 星期七

 
div>身體>

效果圖：
   

：關聯排序列表

通常將兩個以上的列表同時進行排序稱為關聯排序列表，利用屬性connectWidth屬性設定一個選擇符，這樣就可以指定在不同的列表之間移動元素的順序複製程式碼 程式碼如下:

 

   

     

休闲类小游戏

      ×

   

     
• 菠萝蛋糕

     
• 人品计算器

     
• 我的恐怖小屋

     
• 品茗闻香话茶道

     
• 暴打火柴人中文版

   

 

 

   

     

动作类小游戏

      ×

   

     
• 奧特曼之狼人傳說

 戰鬥機
     
• 月蝕之刃

     
• 終極拳皇

     ul>
 

 

   
     

精品遊戲

      ×

   

 

效果圖：



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") ;

複製程式碼 程式碼如下:

 

調整以下課程的安排順序

 

   
• 1.1 連結.JS檔案

   
• 1.2 使用微軟腳本編輯器

   
• 1.3 循環使用

   
• 1.4 使用循環

 

   
• 2.1 使用Switch語句

   
• 2.2 使用Array物件屬性


• 2.3 使用String物件的方法

   
• 2.4 使用Date物件的方法

 

  < ;input type="button" name="button" id="btn" value="確認修改" />
 

p>
div>




效果圖：    

這裡將att當作鍵，值為佈局中用att定義的字串。
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"). (event, ui) {
      }
}); 

ui是一個包含附加資訊的jQuery物件，該物件具有一下物件具有一下子> helper:
一個jQuery對象，表示當前要排序的元素position:
一個包含top屬性和left屬性的對象，表示當前元素相對於原始對象的位置offset:
  一個包含top屬性和left屬性的對象，表示當前元素相對於頁面的絕對位置item:
表示當前拖曳的jQuery對象placeholder:
表示定義的佔位符sender:
目前拖曳元素所屬的排序列表，僅適用於兩個列表之間移動的情況

複製程式碼 程式碼如下: