# jQuery UI API - 可排序小部件(Sortable Widget)
## 所屬類別
[交互(Interactions)](ref-interactions.html)
## 用法
**描述:**使用鼠標調整列表中或者網格中元素的排序。
**版本新增:**1.0
**依賴:**
* [UI 核心(UI Core)](ref-ui-core.html)
* [部件庫(Widget Factory)](api-jQuery-widget.html)
* [鼠標交互(Mouse Interaction)](api-mouse.html)
**注釋:**jQuery UI 可排序(Sortable)插件讓被選元素通過鼠標拖拽進行排序。
**注釋:**為了排序表格行,`tbody` 必須是可排序的(sortable),而不是 `table`。
### 快速導航
| 選項 | 方法 | 事件 |
| --- | --- | --- |
| [appendTo](#option-appendTo)[axis](#option-axis)[cancel](#option-cancel)[connectWith](#option-connectWith)[containment](#option-containment)[cursor](#option-cursor)[cursorAt](#option-cursorAt)[delay](#option-delay)[disabled](#option-disabled)[distance](#option-distance)[dropOnEmpty](#option-dropOnEmpty)[forceHelperSize](#option-forceHelperSize)[forcePlaceholderSize](#option-forcePlaceholderSize)[grid](#option-grid)[handle](#option-handle)[helper](#option-helper)[items](#option-items)[opacity](#option-opacity)[placeholder](#option-placeholder)[revert](#option-revert)[scroll](#option-scroll)[scrollSensitivity](#option-scrollSensitivity)[scrollSpeed](#option-scrollSpeed)[tolerance](#option-tolerance)[zIndex](#option-zIndex) | [cancel](#method-cancel)[destroy](#method-destroy)[disable](#method-disable)[enable](#method-enable)[option](#method-option)[refresh](#method-refresh)[refreshPositions](#method-refreshPositions)[serialize](#method-serialize)[toArray](#method-toArray)[widget](#method-widget) | [activate](#event-activate)[beforeStop](#event-beforeStop)[change](#event-change)[create](#event-create)[deactivate](#event-deactivate)[out](#event-out)[over](#event-over)[receive](#event-receive)[remove](#event-remove)[sort](#event-sort)[start](#event-start)[stop](#event-stop)[update](#event-update) |
#### appendTo
**類型**:jQuery 或 Element 或 Selector 或 String
**描述**:當拖拽時,通過鼠標移動的助手被追加到哪里(例如,解決 overlap/zIndex 問題)。
**支持多個類型:**
* **jQuery**:一個 jQuery 對象,包含助手(helper)要追加到的元素。
* **Element**:要追加助手(helper)的元素。
* **Selector**:一個選擇器,指定哪個元素要追加助手(helper)。
* **String**:字符串 `"parent"` 將促使助手(helper)成為 sortable 項目的同級。
**代碼實例:**
初始化帶有指定 `appendTo` 選項的 sortable:
```
$( ".selector" ).sortable({ appendTo: document.body });
```
在初始化后,獲取或設置 `appendTo` 選項:
```
// getter
var appendTo = $( ".selector" ).sortable( "option", "appendTo" );
// setter
$( ".selector" ).sortable( "option", "appendTo", document.body );
```
**默認值**:"parent"
#### axis
**類型**:String
**描述**:如果定義了該選項,項目只能在水平或垂直方向上被拖拽。可能的值:`"x"`, `"y"`。
**代碼實例:**
初始化帶有指定 `axis` 選項的 sortable:
```
$( ".selector" ).sortable({ axis: "x" });
```
在初始化后,獲取或設置 `axis` 選項:
```
// getter
var axis = $( ".selector" ).sortable( "option", "axis" );
// setter
$( ".selector" ).sortable( "option", "axis", "x" );
```
**默認值**:false
#### cancel
**類型**:Selector
**描述**:防止從匹配選擇器的元素上開始排序。
**代碼實例:**
初始化帶有指定 `cancel` 選項的 sortable:
```
$( ".selector" ).sortable({ cancel: "a,button" });
```
在初始化后,獲取或設置 `cancel` 選項:
```
// getter
var cancel = $( ".selector" ).sortable( "option", "cancel" );
// setter
$( ".selector" ).sortable( "option", "cancel", "a,button" );
```
**默認值**:"input, textarea, button, select, option"
#### connectWith
**類型**:Selector
**描述**:列表中的項目需被連接的其他 sortable 元素的選擇器。這是一個單向關系,如果您想要項目被雙向連接,必須在兩個 sortable 元素上都設置 `connectWith` 選項。
**代碼實例:**
初始化帶有指定 `connectWith` 選項的 sortable:
```
$( ".selector" ).sortable({ connectWith: "#shopping-cart" });
```
在初始化后,獲取或設置 `connectWith` 選項:
```
// getter
var connectWith = $( ".selector" ).sortable( "option", "connectWith" );
// setter
$( ".selector" ).sortable( "option", "connectWith", "#shopping-cart" );
```
**默認值**:false
#### containment
**類型**:Element 或 Selector 或 String
**描述**:定義拖拽時,sortable 項目被約束的邊界。
注釋:為 containment 指定的元素必須有一個已計算的寬度和高度(盡管它不需要顯式)。例如,如果您有 `float: left` sortable 子元素,并指定了 `containment: "parent"`,請確保在 sortable/parent 容器上有 `float: left` ,否則它將有 `height: 0`,導致未定義的行為。
**支持多個類型:**
* **Element**:一個要作為容器使用的元素。
* **Selector**:一個選擇器,指定一個要作為容器使用的元素。
* **String**:一個字符串,標識一個要作為容器使用的元素。可能的值:`"parent"`、`"document"`、`"window"`。
**代碼實例:**
初始化帶有指定 `containment` 選項的 sortable:
```
$( ".selector" ).sortable({ containment: "parent" });
```
在初始化后,獲取或設置 `containment` 選項:
```
// getter
var containment = $( ".selector" ).sortable( "option", "containment" );
// setter
$( ".selector" ).sortable( "option", "containment", "parent" );
```
**默認值**:false
#### cursor
**類型**:String
**描述**:定義當排序時被顯示的光標。
**代碼實例:**
初始化帶有指定 `cursor` 選項的 sortable:
```
$( ".selector" ).sortable({ cursor: "move" });
```
在初始化后,獲取或設置 `cursor` 選項:
```
// getter
var cursor = $( ".selector" ).sortable( "option", "cursor" );
// setter
$( ".selector" ).sortable( "option", "cursor", "move" );
```
**默認值**:"auto"
#### cursorAt
**類型**:Object
**描述**:移動排序元素或助手(helper),這樣光標總是出現,以便從相同的位置進行拖拽。坐標可通過一個或兩個鍵的組合成一個哈希給出:`{ top, left, right, bottom }`。
**代碼實例:**
初始化帶有指定 `cursorAt` 選項的 sortable:
```
$( ".selector" ).sortable({ cursorAt: { left: 5 } });
```
在初始化后,獲取或設置 `cursorAt` 選項:
```
// getter
var cursorAt = $( ".selector" ).sortable( "option", "cursorAt" );
// setter
$( ".selector" ).sortable( "option", "cursorAt", { left: 5 } );
```
**默認值**:false
#### delay
**類型**:Integer
**描述**:鼠標按下后直到排序開始的時間,以毫秒計。該選項可以防止點擊在某個元素上時不必要的拖拽。
**代碼實例:**
初始化帶有指定 `delay` 選項的 sortable:
```
$( ".selector" ).sortable({ delay: 150 });
```
在初始化后,獲取或設置 `delay` 選項:
```
// getter
var delay = $( ".selector" ).sortable( "option", "delay" );
// setter
$( ".selector" ).sortable( "option", "delay", 150 );
```
**默認值**:0
#### disabled
**類型**:Boolean
**描述**:如果設置為 `true`,則禁用該 sortable。
**代碼實例:**
初始化帶有指定 `disabled` 選項的 sortable:
```
$( ".selector" ).sortable({ disabled: true });
```
在初始化后,獲取或設置 `disabled` 選項:
```
// getter
var disabled = $( ".selector" ).sortable( "option", "disabled" );
// setter
$( ".selector" ).sortable( "option", "disabled", true );
```
**默認值**:false
#### distance
**類型**:Number
**描述**:鼠標按下后排序開始前必須移動的距離,以像素計。如果指定了該選項,排序只有在鼠標拖拽超出指定距離時才會開始。該選項可以用于允許在一個手柄內的元素上點擊。
**代碼實例:**
初始化帶有指定 `distance` 選項的 sortable:
```
$( ".selector" ).sortable({ distance: 5 });
```
在初始化后,獲取或設置 `distance` 選項:
```
// getter
var distance = $( ".selector" ).sortable( "option", "distance" );
// setter
$( ".selector" ).sortable( "option", "distance", 5 );
```
**默認值**:1
#### dropOnEmpty
**類型**:Boolean
**描述**:如果為 `false`,從該 sortable 的項目不能被放置在空連接的 sortable 上(請查看 `[connectWith](#option-connectWith)` 選項)。
**代碼實例:**
初始化帶有指定 `dropOnEmpty` 選項的 sortable:
```
$( ".selector" ).sortable({ dropOnEmpty: false });
```
在初始化后,獲取或設置 `dropOnEmpty` 選項:
```
// getter
var dropOnEmpty = $( ".selector" ).sortable( "option", "dropOnEmpty" );
// setter
$( ".selector" ).sortable( "option", "dropOnEmpty", false );
```
**默認值**:true
#### forceHelperSize
**類型**:Boolean
**描述**:如果為 `true`,強制助手(helper)有一個尺寸。
**代碼實例:**
初始化帶有指定 `forceHelperSize` 選項的 sortable:
```
$( ".selector" ).sortable({ forceHelperSize: true });
```
在初始化后,獲取或設置 `forceHelperSize` 選項:
```
// getter
var forceHelperSize = $( ".selector" ).sortable( "option", "forceHelperSize" );
// setter
$( ".selector" ).sortable( "option", "forceHelperSize", true );
```
**默認值**:false
#### forcePlaceholderSize
**類型**:Boolean
**描述**:如果為 `true`,強制占位符(placeholder)有一個尺寸。
**代碼實例:**
初始化帶有指定 `forcePlaceholderSize` 選項的 sortable:
```
$( ".selector" ).sortable({ forcePlaceholderSize: true });
```
在初始化后,獲取或設置 `forcePlaceholderSize` 選項:
```
// getter
var forcePlaceholderSize = $( ".selector" ).sortable( "option", "forcePlaceholderSize" );
// setter
$( ".selector" ).sortable( "option", "forcePlaceholderSize", true );
```
**默認值**:false
#### grid
**類型**:Array
**描述**:對齊排序元素或助手(helper)到網格,每個 x 和 y 像素。數組形式必須是 `[ x, y ]`。
**代碼實例:**
初始化帶有指定 `grid` 選項的 sortable:
```
$( ".selector" ).sortable({ grid: [ 20, 10 ] });
```
在初始化后,獲取或設置 `grid` 選項:
```
// getter
var grid = $( ".selector" ).sortable( "option", "grid" );
// setter
$( ".selector" ).sortable( "option", "grid", [ 20, 10 ] );
```
**默認值**:false
#### handle
**類型**:Selector 或 Element
**描述**:如果指定了該選項,則限制在指定的元素上開始排序。
**代碼實例:**
初始化帶有指定 `handle` 選項的 sortable:
```
$( ".selector" ).sortable({ handle: ".handle" });
```
在初始化后,獲取或設置 `handle` 選項:
```
// getter
var handle = $( ".selector" ).sortable( "option", "handle" );
// setter
$( ".selector" ).sortable( "option", "handle", ".handle" );
```
**默認值**:false
#### helper
**類型**:String 或 Function()
**描述**:允許一個 helper 元素用于拖拽顯示。
**支持多個類型:**
* **String**:如果設置為 `"clone"`,元素將被克隆,且克隆將被拖拽。
* **Function**:一個函數,將返回拖拽時要使用的 DOMElement。函數接收事件,且元素正被排序。
**代碼實例:**
初始化帶有指定 `helper` 選項的 sortable:
```
$( ".selector" ).sortable({ helper: "clone" });
```
在初始化后,獲取或設置 `helper` 選項:
```
// getter
var helper = $( ".selector" ).sortable( "option", "helper" );
// setter
$( ".selector" ).sortable( "option", "helper", "clone" );
```
**默認值**:"original"
#### items
**類型**:Selector
**描述**:指定元素內的哪一個項目應是 sortable。
**代碼實例:**
初始化帶有指定 `items` 選項的 sortable:
```
$( ".selector" ).sortable({ items: "> li" });
```
在初始化后,獲取或設置 `items` 選項:
```
// getter
var items = $( ".selector" ).sortable( "option", "items" );
// setter
$( ".selector" ).sortable( "option", "items", "> li" );
```
**默認值**:"> *"
#### opacity
**類型**:Number
**描述**:當排序時助手(helper)的不透明度。從 `0.01` 到 `1`。
**代碼實例:**
初始化帶有指定 `opacity` 選項的 sortable:
```
$( ".selector" ).sortable({ opacity: 0.5 });
```
在初始化后,獲取或設置 `opacity` 選項:
```
// getter
var opacity = $( ".selector" ).sortable( "option", "opacity" );
// setter
$( ".selector" ).sortable( "option", "opacity", 0.5 );
```
**默認值**:false
#### placeholder
**類型**:String
**描述**:要應用的 class 名稱,否則為白色空白。
**代碼實例:**
初始化帶有指定 `placeholder` 選項的 sortable:
```
$( ".selector" ).sortable({ placeholder: "sortable-placeholder" });
```
在初始化后,獲取或設置 `placeholder` 選項:
```
// getter
var placeholder = $( ".selector" ).sortable( "option", "placeholder" );
// setter
$( ".selector" ).sortable( "option", "placeholder", "sortable-placeholder" );
```
**默認值**:false
#### revert
**類型**:Boolean 或 Number
**描述**:sortable 項目是否使用一個流暢的動畫還原到它的新位置。
**支持多個類型:**
* **Boolean**:當設置為 `true`,該項目將會使用動畫,動畫使用默認的持續時間。
* **Number**:動畫的持續時間,以毫秒計。
**代碼實例:**
初始化帶有指定 `revert` 選項的 sortable:
```
$( ".selector" ).sortable({ revert: true });
```
在初始化后,獲取或設置 `revert` 選項:
```
// getter
var revert = $( ".selector" ).sortable( "option", "revert" );
// setter
$( ".selector" ).sortable( "option", "revert", true );
```
**默認值**:false
#### scroll
**類型**:Boolean
**描述**:如果設置為 `true`,當到達邊緣時頁面會滾動。
**代碼實例:**
初始化帶有指定 `scroll` 選項的 sortable:
```
$( ".selector" ).sortable({ scroll: false });
```
在初始化后,獲取或設置 `scroll` 選項:
```
// getter
var scroll = $( ".selector" ).sortable( "option", "scroll" );
// setter
$( ".selector" ).sortable( "option", "scroll", false );
```
**默認值**:true
#### scrollSensitivity
**類型**:Number
**描述**:定義鼠標距離邊緣多少距離時開始滾動。
**代碼實例:**
初始化帶有指定 `scrollSensitivity` 選項的 sortable:
```
$( ".selector" ).sortable({ scrollSensitivity: 10 });
```
在初始化后,獲取或設置 `scrollSensitivity` 選項:
```
// getter
var scrollSensitivity = $( ".selector" ).sortable( "option", "scrollSensitivity" );
// setter
$( ".selector" ).sortable( "option", "scrollSensitivity", 10 );
```
**默認值**:20
#### scrollSpeed
**類型**:Number
**描述**:當鼠標指針獲取到在 `[scrollSensitivity](#option-scrollSensitivity)` 距離內時,窗體滾動的速度。如果 `scroll` 選項是 `false` 則忽略。
**代碼實例:**
初始化帶有指定 `scrollSpeed` 選項的 sortable:
```
$( ".selector" ).sortable({ scrollSpeed: 40 });
```
在初始化后,獲取或設置 `scrollSpeed` 選項:
```
// getter
var scrollSpeed = $( ".selector" ).sortable( "option", "scrollSpeed" );
// setter
$( ".selector" ).sortable( "option", "scrollSpeed", 40 );
```
**默認值**:20
#### tolerance
**類型**:String
**描述**:指定用于測試項目被移動時是否覆蓋在另一個項目上的模式。可能的值:
* `"intersect"`:項目至少 50% 重疊在其他項目上。
* `"pointer"`:鼠標指針重疊在其他項目上。
**代碼實例:**
初始化帶有指定 `tolerance` 選項的 sortable:
```
$( ".selector" ).sortable({ tolerance: "pointer" });
```
在初始化后,獲取或設置 `tolerance` 選項:
```
// getter
var tolerance = $( ".selector" ).sortable( "option", "tolerance" );
// setter
$( ".selector" ).sortable( "option", "tolerance", "pointer" );
```
**默認值**:"intersect"
#### zIndex
**類型**:Integer
**描述**:當被排序時,元素/助手(helper)的 Z-index。
**代碼實例:**
初始化帶有指定 `zIndex` 選項的 sortable:
```
$( ".selector" ).sortable({ zIndex: 9999 });
```
在初始化后,獲取或設置 `zIndex` 選項:
```
// getter
var zIndex = $( ".selector" ).sortable( "option", "zIndex" );
// setter
$( ".selector" ).sortable( "option", "zIndex", 9999 );
```
**默認值**:1000
#### 方法
#### cancel()
**類型**:jQuery (plugin only)
**描述**:當前排序開始時,取消一個在當前 sortable 中的改變,且恢復到之前的狀態。在 stop 和 receive 回調函數中非常有用。
* 該方法不接受任何參數。
**代碼實例:**
調用 cancel 方法:
```
$( ".selector" ).sortable( "cancel" );
```
#### destroy()
**類型**:jQuery (plugin only)
**描述**:完全移除 sortable 功能。這會把元素返回到它的預初始化狀態。
* 該方法不接受任何參數。
**代碼實例:**
調用 destroy 方法:
```
$( ".selector" ).sortable( "destroy" );
```
#### disable()
**類型**:jQuery (plugin only)
**描述**:禁用 sortable。
* 該方法不接受任何參數。
**代碼實例:**
調用 disable 方法:
```
$( ".selector" ).sortable( "disable" );
```
#### enable()
**類型**:jQuery (plugin only)
**描述**:啟用 sortable。
* 該方法不接受任何參數。
**代碼實例:**
調用 enable 方法:
```
$( ".selector" ).sortable( "enable" );
```
#### option( optionName )
**類型**:Object
**描述**:獲取當前與指定的 `optionName` 關聯的值。
* **optionName**
類型:String
描述:要獲取的選項的名稱。
**代碼實例:**
調用該方法:
```
var isDisabled = $( ".selector" ).sortable( "option", "disabled" );
```
#### option()
**類型**:PlainObject
**描述**:獲取一個包含鍵/值對的對象,鍵/值對表示當前 draggable 選項哈希。
* 該方法不接受任何參數。
**代碼實例:**
調用該方法:
```
var options = $( ".selector" ).sortable( "option" );
```
#### option( optionName, value )
**類型**:jQuery (plugin only)
**描述**:設置與指定的 `optionName` 關聯的 sortable 選項的值。
* **optionName**
類型:String
描述:要設置的選項的名稱。
* **value**
類型:Object
描述:要為選項設置的值。
**代碼實例:**
調用該方法:
```
$( ".selector" ).sortable( "option", "disabled", true );
```
#### option( options )
**類型**:jQuery (plugin only)
**描述**:為 sortable 設置一個或多個選項。
* **options**
類型:Object
描述:要設置的 option-value 對。
**代碼實例:**
調用該方法:
```
$( ".selector" ).sortable( "option", { disabled: true } );
```
#### refresh()
**類型**:jQuery (plugin only)
**描述**:刷新 sortable 項目。觸發所有 sortable 項目重新加載,導致新的項目被認可。
* 該方法不接受任何參數。
**代碼實例:**
調用 refresh 方法:
```
$( ".selector" ).sortable( "refresh" );
```
#### refreshPositions()
**類型**:jQuery (plugin only)
**描述**:刷新 sortable 項目的緩存位置。調用該方法刷新所有 sortable 的已緩存的項目位置。
* 該方法不接受任何參數。
**代碼實例:**
調用 refreshPositions 方法:
```
$( ".selector" ).sortable( "refreshPositions" );
```
#### serialize( options )
**類型**:String
**描述**:序列化 sortable 的項目 `id` 為一個 form/ajax 可提交的字符串。調用該方法會產生一個可被追加到任何 url 中的哈希,以便簡單地把一個新的項目順序提交回服務器。
默認情況下,它通過每個項目的 `id` 進行工作,id 格式為 `"setname_number"`,且它會產生一個形如 `"setname[]=number&setname[]=number"` 的哈希。
注釋:如果序列化返回一個空的字符串,請確認 `id` 屬性包含一個下劃線(_)。形式必須是 `"set_number"`。例如,一個 `id` 屬性為 `"foo_1"`、`"foo_5"`、`"foo_2"` 的 3 元素列表將序列化為 `"foo[]=1&foo[]=5&foo[]=2"`。您可以使用下劃線(_)、等號(=)或連字符(-)來分隔集合和數字。例如,`"foo=1"`、`"foo-1"`、`"foo_1"` 所有都序列化為 `"foo[]=1"`。
* **options**
類型:Object
要自定義序列化的選項。
* **key**(默認值:`屬性中分隔符前面的部分`)
類型:String
描述:把 `part1[]` 替換為指定的值。
* **attribute**(默認值:`"id"`)
類型:String
描述:值要使用的屬性名稱。
* **expression**(默認值:`/(.+)[-=_](.+)/`)
類型:RegExp
描述:用于把屬性值分隔為鍵和值兩部分的正則表達式。
**代碼實例:**
調用 serialize 方法:
```
var sorted = $( ".selector" ).sortable( "serialize", { key: "sort" } );
```
#### toArray( options )
**類型**:Array
**描述**:序列化 sortable 的項目 `id` 為一個字符串的數組。
* **options**
類型:Object
要自定義序列化的選項。
* **attribute**(默認值:`"id"`)
類型:String
描述:值要使用的屬性名稱。
**代碼實例:**
調用 toArray 方法:
```
var sortedIDs = $( ".selector" ).sortable( "toArray" );
```
#### widget()
**類型**:jQuery
**描述**:返回一個包含 sortable 元素的 `jQuery` 對象。
* 該方法不接受任何參數。
**代碼實例:**
調用 widget 方法:
```
var widget = $( ".selector" ).sortable( "widget" );
```
#### 事件
#### activate( event, ui )
**類型**:sortactivate
**描述**:當使用被連接列表時觸發該事件,每個被連接列表在拖拽開始時接收它。
* **event**
類型:Event
* **ui**
類型:Object
* **helper**
類型:jQuery
描述:jQuery 對象,表示被排序的助手(helper)。
* **item**
類型:jQuery
描述:jQuery 對象,表示當前被拖拽的元素。
* **offset**
類型:Object
描述:助手(helper)的當前的絕對位置,表示為 `{ top, left }`。
* **position**
類型:Object
描述:助手(helper)的當前位置,表示為 `{ top, left }`。
* **originalPosition**
類型:Object
描述:元素的原始位置,表示為 `{ top, left }`。
* **sender**
類型:jQuery
描述:如果從一個 sortable 移動到另一個 sortable,項目來自的那個 sortable。
* **placeholder**
類型:jQuery
描述:jQuery 對象,表示被作為占位符使用的元素。
**代碼實例:**
初始化帶有指定 activate 回調的 sortable:
```
$( ".selector" ).sortable({
activate: function( event, ui ) {}
});
```
綁定一個事件監聽器到 sortactivate 事件:
```
$( ".selector" ).on( "sortactivate", function( event, ui ) {} );
```
#### beforeStop( event, ui )
**類型**:sortbeforestop
**描述**:當排序停止時觸發該事件,除了當占位符(placeholder)/助手(helper)仍然可用時。
* **event**
類型:Event
* **ui**
類型:Object
* **helper**
類型:jQuery
描述:jQuery 對象,表示被排序的助手(helper)。
* **item**
類型:jQuery
描述:jQuery 對象,表示當前被拖拽的元素。
* **offset**
類型:Object
描述:助手(helper)的當前的絕對位置,表示為 `{ top, left }`。
* **position**
類型:Object
描述:助手(helper)的當前位置,表示為 `{ top, left }`。
* **originalPosition**
類型:Object
描述:元素的原始位置,表示為 `{ top, left }`。
* **sender**
類型:jQuery
描述:如果從一個 sortable 移動到另一個 sortable,項目來自的那個 sortable。
* **placeholder**
類型:jQuery
描述:jQuery 對象,表示被作為占位符使用的元素。
**代碼實例:**
初始化帶有指定 beforeStop 回調的 sortable:
```
$( ".selector" ).sortable({
beforeStop: function( event, ui ) {}
});
```
綁定一個事件監聽器到 sortbeforestop 事件:
```
$( ".selector" ).on( "sortbeforestop", function( event, ui ) {} );
```
#### change( event, ui )
**類型**:sortchange
**描述**:在排序期間觸發該事件,除了當 DOM 位置改變時。
* **event**
類型:Event
* **ui**
類型:Object
* **helper**
類型:jQuery
描述:jQuery 對象,表示被排序的助手(helper)。
* **item**
類型:jQuery
描述:jQuery 對象,表示當前被拖拽的元素。
* **offset**
類型:Object
描述:助手(helper)的當前的絕對位置,表示為 `{ top, left }`。
* **position**
類型:Object
描述:助手(helper)的當前位置,表示為 `{ top, left }`。
* **originalPosition**
類型:Object
描述:元素的原始位置,表示為 `{ top, left }`。
* **sender**
類型:jQuery
描述:如果從一個 sortable 移動到另一個 sortable,項目來自的那個 sortable。
* **placeholder**
類型:jQuery
描述:jQuery 對象,表示被作為占位符使用的元素。
**代碼實例:**
初始化帶有指定 change 回調的 sortable:
```
$( ".selector" ).sortable({
change: function( event, ui ) {}
});
```
綁定一個事件監聽器到 sortchange 事件:
```
$( ".selector" ).on( "sortchange", function( event, ui ) {} );
```
#### create( event, ui )
**類型**:sortcreate
**描述**:當 droppable 被創建時觸發。
* **event**
類型:Event
* **ui**
類型:Object
注意:`ui` 對象是空的,這里包含它是為了與其他事件保持一致性。
**代碼實例:**
初始化帶有指定 create 回調的 sortable:
```
$( ".selector" ).sortable({
create: function( event, ui ) {}
});
```
綁定一個事件監聽器到 sortcreate 事件:
```
$( ".selector" ).on( "sortcreate", function( event, ui ) {} );
```
#### deactivate( event, ui )
**類型**:sortdeactivate
**描述**:當排序停止時觸發該事件,該事件傳播到所有可能的連接列表。。
* **event**
類型:Event
* **ui**
類型:Object
* **helper**
類型:jQuery
描述:jQuery 對象,表示被排序的助手(helper)。
* **item**
類型:jQuery
描述:jQuery 對象,表示當前被拖拽的元素。
* **offset**
類型:Object
描述:助手(helper)的當前的絕對位置,表示為 `{ top, left }`。
* **position**
類型:Object
描述:助手(helper)的當前位置,表示為 `{ top, left }`。
* **originalPosition**
類型:Object
描述:元素的原始位置,表示為 `{ top, left }`。
* **sender**
類型:jQuery
描述:如果從一個 sortable 移動到另一個 sortable,項目來自的那個 sortable。
* **placeholder**
類型:jQuery
描述:jQuery 對象,表示被作為占位符使用的元素。
**代碼實例:**
初始化帶有指定 deactivate 回調的 sortable:
```
$( ".selector" ).sortable({
deactivate: function( event, ui ) {}
});
```
綁定一個事件監聽器到 sortdeactivate 事件:
```
$( ".selector" ).on( "sortdeactivate", function( event, ui ) {} );
```
#### out( event, ui )
**類型**:sortout
**描述**:當一個 sortable 項目從一個 sortable 列表移除時觸發該事件。
注釋:當一個 sortable 項目被撤銷時也會觸發該事件。
* **event**
類型:Event
* **ui**
類型:Object
* **helper**
類型:jQuery
描述:jQuery 對象,表示被排序的助手(helper)。
* **item**
類型:jQuery
描述:jQuery 對象,表示當前被拖拽的元素。
* **offset**
類型:Object
描述:助手(helper)的當前的絕對位置,表示為 `{ top, left }`。
* **position**
類型:Object
描述:助手(helper)的當前位置,表示為 `{ top, left }`。
* **originalPosition**
類型:Object
描述:元素的原始位置,表示為 `{ top, left }`。
* **sender**
類型:jQuery
描述:如果從一個 sortable 移動到另一個 sortable,項目來自的那個 sortable。
* **placeholder**
類型:jQuery
描述:jQuery 對象,表示被作為占位符使用的元素。
**代碼實例:**
初始化帶有指定 out 回調的 sortable:
```
$( ".selector" ).sortable({
out: function( event, ui ) {}
});
```
綁定一個事件監聽器到 sortout 事件:
```
$( ".selector" ).on( "sortout", function( event, ui ) {} );
```
#### over( event, ui )
**類型**:sortover
**描述**:當一個 sortable 項目移動到一個 sortable 列表時觸發該事件。
* **event**
類型:Event
* **ui**
類型:Object
* **helper**
類型:jQuery
描述:jQuery 對象,表示被排序的助手(helper)。
* **item**
類型:jQuery
描述:jQuery 對象,表示當前被拖拽的元素。
* **offset**
類型:Object
描述:助手(helper)的當前的絕對位置,表示為 `{ top, left }`。
* **position**
類型:Object
描述:助手(helper)的當前位置,表示為 `{ top, left }`。
* **originalPosition**
類型:Object
描述:元素的原始位置,表示為 `{ top, left }`。
* **sender**
類型:jQuery
描述:如果從一個 sortable 移動到另一個 sortable,項目來自的那個 sortable。
* **placeholder**
類型:jQuery
描述:jQuery 對象,表示被作為占位符使用的元素。
**代碼實例:**
初始化帶有指定 over 回調的 sortable:
```
$( ".selector" ).sortable({
out: function( event, ui ) {}
});
```
綁定一個事件監聽器到 sortover 事件:
```
$( ".selector" ).on( "sortout", function( event, ui ) {} );
```
#### receive( event, ui )
**類型**:sortreceive
**描述**:當來自一個連接的 sortable 列表的一個項目被放置到另一個列表時觸發該事件。后者是事件目標。
* **event**
類型:Event
* **ui**
類型:Object
* **helper**
類型:jQuery
描述:jQuery 對象,表示被排序的助手(helper)。
* **item**
類型:jQuery
描述:jQuery 對象,表示當前被拖拽的元素。
* **offset**
類型:Object
描述:助手(helper)的當前的絕對位置,表示為 `{ top, left }`。
* **position**
類型:Object
描述:助手(helper)的當前位置,表示為 `{ top, left }`。
* **originalPosition**
類型:Object
描述:元素的原始位置,表示為 `{ top, left }`。
* **sender**
類型:jQuery
描述:如果從一個 sortable 移動到另一個 sortable,項目來自的那個 sortable。
* **placeholder**
類型:jQuery
描述:jQuery 對象,表示被作為占位符使用的元素。
**代碼實例:**
初始化帶有指定 receive 回調的 sortable:
```
$( ".selector" ).sortable({
receive: function( event, ui ) {}
});
```
綁定一個事件監聽器到 sortreceive 事件:
```
$( ".selector" ).on( "sortreceive", function( event, ui ) {} );
```
#### remove( event, ui )
**類型**:sortremove
**描述**:當來自一個連接的 sortable 列表的一個項目被放置到另一個列表時觸發該事件。前者是事件目標。
* **event**
類型:Event
* **ui**
類型:Object
* **helper**
類型:jQuery
描述:jQuery 對象,表示被排序的助手(helper)。
* **item**
類型:jQuery
描述:jQuery 對象,表示當前被拖拽的元素。
* **offset**
類型:Object
描述:助手(helper)的當前的絕對位置,表示為 `{ top, left }`。
* **position**
類型:Object
描述:助手(helper)的當前位置,表示為 `{ top, left }`。
* **originalPosition**
類型:Object
描述:元素的原始位置,表示為 `{ top, left }`。
* **placeholder**
類型:jQuery
描述:jQuery 對象,表示被作為占位符使用的元素。
**代碼實例:**
初始化帶有指定 remove 回調的 sortable:
```
$( ".selector" ).sortable({
remove: function( event, ui ) {}
});
```
綁定一個事件監聽器到 sortremove 事件:
```
$( ".selector" ).on( "sortremove", function( event, ui ) {} );
```
#### sort( event, ui )
**類型**:sort
**描述**:在排序期間觸發該事件。
* **event**
類型:Event
* **ui**
類型:Object
* **helper**
類型:jQuery
描述:jQuery 對象,表示被排序的助手(helper)。
* **item**
類型:jQuery
描述:jQuery 對象,表示當前被拖拽的元素。
* **offset**
類型:Object
描述:助手(helper)的當前的絕對位置,表示為 `{ top, left }`。
* **position**
類型:Object
描述:助手(helper)的當前位置,表示為 `{ top, left }`。
* **originalPosition**
類型:Object
描述:元素的原始位置,表示為 `{ top, left }`。
* **sender**
類型:jQuery
描述:如果從一個 sortable 移動到另一個 sortable,項目來自的那個 sortable。
* **placeholder**
類型:jQuery
描述:jQuery 對象,表示被作為占位符使用的元素。
**代碼實例:**
初始化帶有指定 sort 回調的 sortable:
```
$( ".selector" ).sortable({
sort: function( event, ui ) {}
});
```
綁定一個事件監聽器到 sort 事件:
```
$( ".selector" ).on( "sort", function( event, ui ) {} );
```
#### start( event, ui )
**類型**:sortstart
**描述**:當排序開始時觸發該事件。
* **event**
類型:Event
* **ui**
類型:Object
* **helper**
類型:jQuery
描述:jQuery 對象,表示被排序的助手(helper)。
* **item**
類型:jQuery
描述:jQuery 對象,表示當前被拖拽的元素。
* **offset**
類型:Object
描述:助手(helper)的當前的絕對位置,表示為 `{ top, left }`。
* **position**
類型:Object
描述:助手(helper)的當前位置,表示為 `{ top, left }`。
* **originalPosition**
類型:Object
描述:元素的原始位置,表示為 `{ top, left }`。
* **sender**
類型:jQuery
描述:如果從一個 sortable 移動到另一個 sortable,項目來自的那個 sortable。
* **placeholder**
類型:jQuery
描述:jQuery 對象,表示被作為占位符使用的元素。
**代碼實例:**
初始化帶有指定 start 回調的 sortable:
```
$( ".selector" ).sortable({
start: function( event, ui ) {}
});
```
綁定一個事件監聽器到 sortstart 事件:
```
$( ".selector" ).on( "sortstart", function( event, ui ) {} );
```
#### stop( event, ui )
**類型**:sortstop
**描述**:當排序停止時觸發該事件。
* **event**
類型:Event
* **ui**
類型:Object
* **helper**
類型:jQuery
描述:jQuery 對象,表示被排序的助手(helper)。
* **item**
類型:jQuery
描述:jQuery 對象,表示當前被拖拽的元素。
* **offset**
類型:Object
描述:助手(helper)的當前的絕對位置,表示為 `{ top, left }`。
* **position**
類型:Object
描述:助手(helper)的當前位置,表示為 `{ top, left }`。
* **originalPosition**
類型:Object
描述:元素的原始位置,表示為 `{ top, left }`。
* **sender**
類型:jQuery
描述:如果從一個 sortable 移動到另一個 sortable,項目來自的那個 sortable。
* **placeholder**
類型:jQuery
描述:jQuery 對象,表示被作為占位符使用的元素。
**代碼實例:**
初始化帶有指定 stop 回調的 sortable:
```
$( ".selector" ).sortable({
stop: function( event, ui ) {}
});
```
綁定一個事件監聽器到 sortstop 事件:
```
$( ".selector" ).on( "sortstop", function( event, ui ) {} );
```
#### update( event, ui )
**類型**:sortupdate
**描述**:當用戶停止排序且 DOM 位置改變時觸發該事件。
* **event**
類型:Event
* **ui**
類型:Object
* **helper**
類型:jQuery
描述:jQuery 對象,表示被排序的助手(helper)。
* **item**
類型:jQuery
描述:jQuery 對象,表示當前被拖拽的元素。
* **offset**
類型:Object
描述:助手(helper)的當前的絕對位置,表示為 `{ top, left }`。
* **position**
類型:Object
描述:助手(helper)的當前位置,表示為 `{ top, left }`。
* **originalPosition**
類型:Object
描述:元素的原始位置,表示為 `{ top, left }`。
* **sender**
類型:jQuery
描述:如果從一個 sortable 移動到另一個 sortable,項目來自的那個 sortable。
* **placeholder**
類型:jQuery
描述:jQuery 對象,表示被作為占位符使用的元素。
**代碼實例:**
初始化帶有指定 update 回調的 sortable:
```
$( ".selector" ).sortable({
update: function( event, ui ) {}
});
```
綁定一個事件監聽器到 sortupdate 事件:
```
$( ".selector" ).on( "sortupdate", function( event, ui ) {} );
```
## 實例
一個簡單的 jQuery UI 可排序小部件(Sortable Widget)。
```
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>可排序小部件(Sortable Widget)演示</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<ul id="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<script>$("#sortable").sortable();</script>
</body>
</html>
```
- jQuery UI 基礎
- jQuery UI 簡介
- jQuery UI 下載
- jQuery UI 使用
- jQuery UI 定制
- jQuery UI 工作原理
- jQuery UI 主題
- jQuery UI 主題
- jQuery UI ThemeRoller
- jQuery UI CSS 框架 API
- jQuery UI 設計主題
- jQuery UI 部件庫
- jQuery UI 部件庫(Widget Factory)
- jQuery UI 通過部件庫(Widget Factory)擴展小部件
- jQuery UI 小部件(Widget)方法調用
- jQuery UI 為什么使用部件庫(Widget Factory)
- jQuery UI 如何使用部件庫(Widget Factory)
- jQuery UI 實例
- jQuery UI 實例
- jQuery UI 實例 - 拖動(Draggable)
- jQuery UI 實例 - 放置(Droppable)
- jQuery UI 實例 - 縮放(Resizable)
- jQuery UI 實例 - 選擇(Selectable)
- jQuery UI 實例 - 排序(Sortable)
- jQuery UI 實例 - 折疊面板(Accordion)
- jQuery UI 實例 - 自動完成(Autocomplete)
- jQuery UI 實例 - 按鈕(Button)
- jQuery UI 實例 - 日期選擇器(Datepicker)
- jQuery UI 實例 - 對話框(Dialog)
- jQuery UI 實例 - 菜單(Menu)
- jQuery UI 實例 - 進度條(Progressbar)
- jQuery UI 實例 - 滑塊(Slider)
- jQuery UI 實例 - 旋轉器(Spinner)
- jQuery UI 實例 - 標簽頁(Tabs)
- jQuery UI 實例 - 工具提示框(Tooltip)
- jQuery UI 實例 - 特效(Effect)
- jQuery UI 實例 - 顯示(Show)
- jQuery UI 實例 - 隱藏(Hide)
- jQuery UI 實例 - 切換(Toggle)
- jQuery UI 實例 - 添加 Class(Add Class)
- jQuery UI 實例 - 移除 Class(Remove Class)
- jQuery UI 實例 - 切換 Class(Toggle Class)
- jQuery UI 實例 - 轉換 Class(Switch Class)
- jQuery UI 實例 - 顏色動畫(Color Animation)
- jQuery UI 實例 - 定位(Position)
- jQuery UI 實例 - 部件庫(Widget Factory)
- jQuery UI API 參考
- jQuery UI API 類別 - 特效(Effects)
- jQuery UI API - .addClass()
- jQuery UI API - 百葉窗特效(Blind Effect)
- jQuery UI API - 反彈特效(Bounce Effect)
- jQuery UI API - 剪輯特效(Clip Effect)
- jQuery UI API - 顏色動畫(Color Animation)
- jQuery UI API - 降落特效(Drop Effect)
- jQuery UI API - Easings
- jQuery UI API - .effect()
- jQuery UI API - 爆炸特效(Explode Effect)
- jQuery UI API - 淡入淡出特效(Fade Effect)
- jQuery UI API - 折疊特效(Fold Effect)
- jQuery UI API - .hide()
- jQuery UI API - 突出特效(Highlight Effect)
- jQuery UI API - 膨脹特效(Puff Effect)
- jQuery UI API - 跳動特效(Pulsate Effect)
- jQuery UI API - .removeClass()
- jQuery UI API - 縮放特效(Scale Effect)
- jQuery UI API - 震動特效(Shake Effect)
- jQuery UI API - .show()
- jQuery UI API - 尺寸特效(Size Effect)
- jQuery UI API - 滑動特效(Slide Effect)
- jQuery UI API - .switchClass()
- jQuery UI API - .toggle()
- jQuery UI API - .toggleClass()
- jQuery UI API - 轉移特效(Transfer Effect)
- jQuery UI API 類別 - 特效核心(Effects Core)
- jQuery UI API - 顏色動畫(Color Animation)
- jQuery UI API 類別 - 交互(Interactions)
- jQuery UI API - 可拖拽小部件(Draggable Widget)
- jQuery UI API - 可放置小部件(Droppable Widget)
- jQuery UI API - 鼠標交互(Mouse Interaction)
- jQuery UI API - 可調整尺寸小部件(Resizable Widget)
- jQuery UI API - 可選擇小部件(Selectable Widget)
- jQuery UI API - 可排序小部件(Sortable Widget)
- jQuery UI API 類別 - 方法重載(Method Overrides)
- jQuery UI API - .focus()
- jQuery UI API - .position()
- jQuery UI API 類別 - 方法(Methods)
- jQuery UI API - .disableSelection()
- jQuery UI API - .enableSelection()
- jQuery UI API - .removeUniqueId()
- jQuery UI API - .scrollParent()
- jQuery UI API - .uniqueId()
- jQuery UI API - .zIndex()
- jQuery UI API 類別 - 選擇器(Selectors)
- jQuery UI API - :data() Selector
- jQuery UI API - :focusable Selector
- jQuery UI API - :tabbable Selector
- jQuery UI API 類別 - 主題(Theming)
- jQuery UI API - CSS 框架(CSS Framework)
- jQuery UI API - 圖標(Icons)
- jQuery UI API - 堆疊元素(Stacking Elements)
- jQuery UI API 類別 - UI 核心(UI Core)
- jQuery UI API 類別 - 實用工具(Utilities)
- jQuery UI API - 部件庫(Widget Factory)
- jQuery UI API - 插件橋(Widget Plugin Bridge)
- jQuery UI API 類別 - 小部件(Widgets)
- jQuery UI API - 折疊面板部件(Accordion Widget)
- jQuery UI API - 自動完成部件(Autocomplete Widget)
- jQuery UI API - 按鈕部件(Button Widget)
- jQuery UI API - 日期選擇器部件(Datepicker Widget)
- jQuery UI API - 對話框部件(Dialog Widget)
- jQuery UI API - 菜單部件(Menu Widget)
- jQuery UI API - 進度條部件(Progressbar Widget)
- jQuery UI API - 滑塊部件(Slider Widget)
- jQuery UI API - 旋轉器部件(Spinner Widget)
- jQuery UI API - 標簽頁部件(Tabs Widget)
- jQuery UI API - 工具提示框部件(Tooltip Widget)
- jQuery EasyUI 簡介
- jQuery EasyUI 應用
- jQuery EasyUI 應用 - 創建 CRUD 應用
- jQuery EasyUI 應用 - 創建 CRUD 數據網格(DataGrid)
- jQuery EasyUI 應用 - 創建展開行明細編輯表單的 CRUD 應用
- jQuery EasyUI 應用 - 創建 RSS Feed 閱讀器
- jQuery EasyUI 拖放
- jQuery EasyUI 拖放 - 基本的拖動和放置
- jQuery EasyUI 拖放 - 創建拖放的購物車
- jQuery EasyUI 拖放 - 創建學校課程表
- jQuery EasyUI 菜單與按鈕
- jQuery EasyUI 菜單與按鈕 - 創建簡單的菜單
- jQuery EasyUI 菜單與按鈕 - 創建鏈接按鈕(Link Button)
- jQuery EasyUI 菜單與按鈕 - 創建菜單按鈕(Menu Button)
- jQuery EasyUI 菜單與按鈕 - 創建分割按鈕(Split Button)
- jQuery EasyUI 布局
- jQuery EasyUI 布局 - 為網頁創建邊框布局
- jQuery EasyUI 布局 - 在面板中創建復雜布局
- jQuery EasyUI 布局 - 創建折疊面板
- jQuery EasyUI 布局 - 創建標簽頁(Tabs)
- jQuery EasyUI 布局 - 動態添加標簽頁(Tabs)
- jQuery EasyUI 布局 - 添加自動播放標簽頁(Tabs)
- jQuery EasyUI 布局 - 創建 XP 風格左側面板
- jQuery EasyUI 數據網格
- jQuery EasyUI 數據網格 - 轉換 HTML 表格為數據網格
- jQuery EasyUI 數據網格 - 取得選中行數據
- jQuery EasyUI 數據網格 - 添加查詢功能
- jQuery EasyUI 數據網格 - 添加工具欄
- jQuery EasyUI 數據網格 - 創建復雜工具欄
- jQuery EasyUI 數據網格 - 設置凍結列
- jQuery EasyUI 數據網格 - 動態改變列
- jQuery EasyUI 數據網格 - 格式化列
- jQuery EasyUI 數據網格 - 設置排序
- jQuery EasyUI 數據網格 - 自定義排序
- jQuery EasyUI 數據網格 - 創建列組合
- jQuery EasyUI 數據網格 - 添加復選框
- jQuery EasyUI 數據網格 - 自定義分頁
- jQuery EasyUI 數據網格 - 啟用行內編輯
- jQuery EasyUI 數據網格 - 擴展編輯器
- jQuery EasyUI 數據網格 - 列運算
- jQuery EasyUI 數據網格 - 合并單元格
- jQuery EasyUI 數據網格 - 創建自定義視圖
- jQuery EasyUI 數據網格 - 創建頁腳摘要
- jQuery EasyUI 數據網格 - 條件設置行背景顏色
- jQuery EasyUI 數據網格 - 創建屬性網格
- jQuery EasyUI 數據網格 - 擴展行顯示細節
- jQuery EasyUI 數據網格 - 創建子網格
- jQuery EasyUI 數據網格 - 使用虛擬滾動視圖顯示海量數據
- jQuery EasyUI 數據網格 - 添加分頁組件
- jQuery EasyUI 窗口
- jQuery EasyUI 窗口 - 創建簡單窗口
- jQuery EasyUI 窗口 - 自定義窗口工具欄
- jQuery EasyUI 窗口 - 窗口與布局
- jQuery EasyUI 窗口 - 創建對話框
- jQuery EasyUI 窗口 - 自定義帶有工具條和按鈕的對話框
- jQuery EasyUI 樹形菜單
- jQuery EasyUI 樹形菜單 - 使用標記創建樹形菜單
- jQuery EasyUI 樹形菜單 - 創建異步樹形菜單
- jQuery EasyUI 樹形菜單 - 樹形菜單添加節點
- jQuery EasyUI 樹形菜單 - 創建帶復選框的樹形菜單
- jQuery EasyUI 樹形菜單 - 樹形菜單拖放控制
- jQuery EasyUI 樹形菜單 - 樹形菜單加載父/子節點
- jQuery EasyUI 樹形菜單 - 創建基礎樹形網格
- jQuery EasyUI 樹形菜單 - 創建復雜樹形網格
- jQuery EasyUI 樹形菜單 - 樹形網格動態加載
- jQuery EasyUI 樹形菜單 - 樹形網格添加分頁
- jQuery EasyUI 樹形菜單 - 樹形網格惰性加載節點
- jQuery EasyUI 表單
- jQuery EasyUI 表單 - 創建異步提交表單
- jQuery EasyUI 表單 - 表單驗證
- jQuery EasyUI 表單 - 創建樹形下拉框
- jQuery EasyUI 表單 - 格式化下拉框
- jQuery EasyUI 表單 - 過濾下拉數據網格
- jQuery EasyUI 插件
- jQuery EasyUI 擴展
- 免責聲明