使用鼠标调整列表中或者网格中元素的排序。
依赖：
注释：jQuery UI 可排序（Sortable）插件让被选元素通过鼠标拖拽进行排序。
注释：为了排序表格行，tbody 必须是可排序的（sortable），而不是 table。
快速导航
选项
- appendTo：
- axis：
- cancel：防止从匹配选择器的元素上开始排序。
- connectWith：列表中的项目需被连接的其他 sortable 元素的选择器。这是一个单向关系，如果您想要项目被双向连接，必须在两个 sortable 元素上都设置
connectWith选项。 - containment：
- cursor：
- cursorAt：
- delay：
- disabled：
- distance：
- dropOnEmpty：如果为
false，从该 sortable 的项目不能被放置在空连接的 sortable 上（请查看connectWith选项）。 - forceHelperSize：如果为
true，强制助手（helper）有一个尺寸。 - forcePlaceholderSize：如果为
true，强制占位符（placeholder）有一个尺寸。 - grid：
- handle：
- helper：
- items：指定元素内的哪一个项目应是 sortable。
- opacity：
- placeholder：要应用的 class 名称，否则为白色空白。
- revert：sortable 项目是否使用一个流畅的动画还原到它的新位置。
- Boolean：当设置为
true，该项目将会使用动画，动画使用默认的持续时间。 - Number：动画的持续时间，以毫秒计。
- scroll：
- scrollSensitivity：
- scrollSpeed：
- tolerance：指定用于测试项目被移动时是否覆盖在另一个项目上的模式。可能的值：
"intersect"：项目至少 50% 重叠在其他项目上。"pointer"：鼠标指针重叠在其他项目上。- zIndex：
支持多个类型：
方法
- cancel()：
- destroy()：
- disable()：
- enable()：
- option()：
- refresh()：
- refreshPositions()：刷新 sortable 项目的缓存位置。调用该方法刷新所有 sortable 的已缓存的项目位置。
- serialize()：序列化 sortable 的项目
id为一个 form/ajax 可提交的字符串。调用该方法会产生一个可被追加到任何 url 中的哈希，以便简单地把一个新的项目顺序提交回服务器。 - toArray()：序列化 sortable 的项目
id为一个字符串的数组。 - widget()：
事件
- activate( event, ui )：当使用被连接列表时触发该事件，每个被连接列表在拖拽开始时接收它。
- beforeStop( event, ui )：当排序停止时触发该事件，除了当占位符（placeholder）/助手（helper）仍然可用时。
- change( event, ui )：在排序期间触发该事件，除了当 DOM 位置改变时。
- create( event, ui )：当 droppable 被创建时触发。
- deactivate( event, ui )：当排序停止时触发该事件，该事件传播到所有可能的连接列表。。
- out( event, ui )：当一个 sortable 项目从一个 sortable 列表移除时触发该事件。
- over( event, ui )：当一个 sortable 项目移动到一个 sortable 列表时触发该事件。
- receive( event, ui )：当来自一个连接的 sortable 列表的一个项目被放置到另一个列表时触发该事件。后者是事件目标。
- remove( event, ui )：当来自一个连接的 sortable 列表的一个项目被放置到另一个列表时触发该事件。前者是事件目标。
- sort( event, ui )：在排序期间触发该事件。
- start( event, ui )：当排序开始时触发该事件。
- stop( event, ui )：当排序停止时触发该事件。
- update( event, ui )：当用户停止排序且 DOM 位置改变时触发该事件。
事件参数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 对象，表示被作为占位符使用的元素。
实例
一个简单的 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>