Schalom Divac: 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’ )

Schalom Divac

網頁

2021年10月26日星期二

jQuery UI sortable()實現拖動排序

jQuery UI sortable事件：

沒有留言:

張貼留言

網頁

2021年10月26日 星期二

jQuery UI sortable()實現拖動排序

jQuery UI sortable事件：

沒有留言:

張貼留言

2021年10月26日星期二