# 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 扩展
- 免责声明