溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
jquery ui 的另一個強大的功能就是拖動排序，也就是通過鼠標的拖到，實現對一些元素的排序。
廢話少說，用實例說話。
下面是對一組li元素進行排序的實例
jquery-ui-sortable 拖拽之前截圖 — ifxoxo.com
jquery-ui-sortable 拖拽過程截圖 — ifxoxo.com
jquery-ui-sortable 拖拽排序之后 — ifxoxo.com
(1)jquery.js
(2)jquery.ui
(3)jquery.ui的css
需要一個< div >或者< ul >等元素， 它的直接子節點將可以被拖拽排序
最簡單的初始化函數：
（它支持很多參數，詳見4）
（為了更好的解釋一些參數，有一個復雜的示例，詳見6）
| 參數 | 默認值 | 作用 |
| 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: ‘h3′ |
| 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值 |
（為了更好的解釋一些事件和方法，有一個復雜的示例，詳見6）
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) { … });
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’ )
展示排序結果–ifxoxo.com
三、其他jquery ui 文章
1、jquery ui（一）簡介
2、jquery ui（二）拖拽 draggable和droppable
3、jquery ui（三）彈出窗口 dialog
4、jquery ui（四）進度條 progressbar
5、jquery ui（五）日期選擇器 datepicker
6、jquery ui（六）拖動排序 sortable
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
