jQuery UI sortable()實現拖動排序
Query UI的強大不用多說，今天來看下它的拖動排序功能，jQuery UI使用sortable()實現對元素拖動排序，首先來看下面這個簡單的例子：
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI sortable()實現拖動排序</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://tool.phpddt.com/resources/js/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<script>
$(function() {
$( ".sortable" ).sortable({
cursor: "move",
items :"li", //只是li可以拖動
opacity: 0.6, //拖動時，透明度為0.6
revert: true, //釋放時，增加動畫
update : function(event, ui){ //更新排序之後
alert($(this).sortable("toArray"));
}
});
});
</script>
<ul class="sortable">
<li class="ui-state-default" id="1">第1項</li>
<li class="ui-state-default" id="2" >第2項</li>
<li class="ui-state-default" id="3">第3項</li>
</ul>
</body>
</html>
jQuery UI sortable引數：
| 引數 | 預設值 | 作用 |
| axis | false | 如果有設定，則元素僅能橫向或縱向拖動。可選值：’x', ‘y’ |
| cancel | input,textarea, button,select,option |
阻止排序動作在匹配的元素上發生 |
| connectWith | false | 允許sortable物件連線另一個sortable物件，可將item元素拖拽到另一箇中.(型別：Selector) |
| containment | false | 約束排序動作只能在一個指定的範圍內發生。可選值：DOM物件, ‘parent’, ‘document’, ‘window’, 或jQuery物件 |
| cursor | auto | 定義在開始排序動作時，滑鼠的樣式。 如 cursor: “move” |
| cursorAt | false | 當開始移動時，元素的偏移的位置（最多兩個方向）。可選值：{ top, left, right, bottom }。 如 cursorAt: {left:5,bottom:5} |
| delay | 0 | 以毫秒為單位，設定延遲多久才啟用排序動作。此引數可防止誤點選。 如 delay: 500 |
| distance | 1 | 決定至少要在元素上面拖動多少畫素後，才正式觸發排序動作。 如 distance: 30 |
| dropOnEmpty | false | 是否允許拖拽到一個空的sortable物件中。 |
| grid | false | 每次移動都按一個格子大小移動，陣列值：[x,y] 如 grid: [50, 20] |
| handle | false | 限制排序的動作只能在item元素中的某種元素 如 handle: ‘h2′ |
| helper | original | 設定是否在拖拽元素時，顯示一個輔助的元素。可選值：‘original’, ‘clone’。 如 helper: ‘clone’ |
| items | “> *” (第一級子元素) | 指定在排序物件中，哪些元素是可以進行拖拽排序的。 如 items: “> li” |
| opacity | false | 輔助元素(helper)顯示的透明度 如 opacity: 0.6 |
| placeholder | false | 設定當排序動作發生時，空白佔位符的CSS樣式 如 placeholder: ‘css-class-name’ （指定一個css的class） |
| revert | false | 如果設定成true，則被拖拽的元素在返回新位置時，會有一個動畫效果 |
| scroll | false | 如果設定成true，則元素被拖動到頁面邊緣時，會自動滾動。 |
| scrollSensitivity | 20 | 設定當元素移動至邊緣多少畫素時，便開始滾動頁面 |
| scrollSpeed | 20 | 設定頁面滾動的速度 |
| tolerance | intersect | 設定當拖動元素越過其它元素多少時便對元素進行重新排序。可選值：’intersect’, ‘pointer’ intersect：至少重疊50% pointer：滑鼠指標重疊元素 |
| zIndex | 1000 | 設定在排序動作發生時，元素的z-index值 |
jQuery UI sortable事件：
start
當排序動作開始時觸發此事件。
定義：$(‘.selector’).sortable({ start: function(event, ui) { … } });
繫結：$(‘.selector’).bind(‘sortstart’, function(event, ui) { … });
sort
當元素髮生排序時觸發此事件。
定義：$(‘.selector’).sortable({ sort: function(event, ui) { … } });
繫結：$(‘.selector’).bind(‘sort’, function(event, ui) { … });
change
當元素髮生排序且座標已發生改變時觸發此事件。
定義：$(‘.selector’).sortable({ change: function(event, ui) { … } });
繫結：$(‘.selector’).bind(‘sortchange’, function(event, ui) { … });
beforeStop
當排序動作結束之前觸發此事件。此時佔位符元素和輔助元素仍有效。
定義：$(‘.selector’).sortable({ beforeStop: function(event, ui) { … } });
繫結：$(‘.selector’).bind(‘sortbeforeStop’, function(event, ui) { … });
stop
當排序動作結束時觸發此事件。
定義：$(‘.selector’).sortable({ stop: function(event, ui) { … } });
繫結：$(‘.selector’).bind(‘sortstop’, function(event, ui) { … });
update
當排序動作結束時且元素座標已經發生改變時觸發此事件。
定義：$(‘.selector’).sortable({ update: function(event, ui) { … } });
繫結：$(‘.selector’).bind(‘sortupdate’, function(event, ui) { … });
receive
當一個已連線的sortable物件接收到另一個sortable物件的元素後觸發此事件。
定義：$(‘.selector’).sortable({ receive: function(event, ui) { … } });
繫結：$(‘.selector’).bind(‘sortreceive’, function(event, ui) { … });
over
當一個元素拖拽移入另一個sortable物件後觸發此事件。
定義：$(‘.selector’).sortable({ over: function(event, ui) { … } });
繫結：$(‘.selector’).bind(‘sortover’, function(event, ui) { … });
out
當一個元素拖拽移出sortable物件移出並進入另一個sortable物件後觸發此事件。
定義：$(‘.selector’).sortable({ out: function(event, ui) { … } });
繫結：$(‘.selector’).bind(‘sortout’, function(event, ui) { … });
activate
當一個有使用連線的sortable物件開始排序動作時，所有允許的sortable觸發此事件。
定義：$(‘.selector’).sortable({ activate: function(event, ui) { … } });
繫結：$(‘.selector’).bind(‘sortactivate’, function(event, ui) { … });
deactivate
當一個有使用連線的sortable物件結束排序動作時，所有允許的sortable觸發此事件。
定義：$(‘.selector’).sortable({ deactivate: function(event, ui) { … } });
繫結：$(‘.selector’).bind(‘sortdeactivate’, function(event, ui) { … });
jQuery UI sortable方法：
destory
從元素中移除拖拽功能。
用法：.sortable( ‘destroy’ )
disable
禁用元素的拖拽功能。
用法：.sortable( ‘disable’ )
enable
啟用元素的拖拽功能。
用法：.sortable( ‘enable’ )
option
獲取或設定元素的引數。
用法：.sortable( ‘option’ , optionName , [value] )
serialize
獲取或設定序列化後的每個item元素的id屬性。
用法：.sortable( ‘serialize’ , [options] )
toArray
獲取序列化後的每個item元素的id屬性的陣列。
用法：.sortable( ‘toArray’ ）
refresh
手動重新重新整理當前sortable物件的item元素的排序。
用法：.sortable( ‘refresh’ )
refreshPositions
手動重新重新整理當前sortable物件的item元素的座標，此方法可能會降低效能。
用法：.sortable( ‘refreshPositions’ )
cancel
取消當前sortable物件中item元素的排序改變。
用法：.sortable( ‘cancel’ )
轉載請註明來源：jQuery UI sortable()實現拖動排序
http://www.php1.cn/Content/jQueryUIsortable--_ShiXianTuoDongPaiXu.html