jQuery UI （5）Sortable 排序插件

使用鼠标调整列表中或者网格中元素的排序。

一、实例

一个简单的 jQuery UI 可排序小部件（Sortable Widget）。

代码：

<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>
  

查看演示

注释：jQuery UI 可排序（Sortable）插件让被选元素通过鼠标拖拽进行排序。

注释：为了排序表格行，tbody 必须是可排序的（sortable），而不是 table。

二、快速导航

1、选项

• 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：

2、方法

• cancel()：
• destroy()：
• disable()：
• enable()：
• option()：
• refresh()：
• refreshPositions()：刷新 sortable 项目的缓存位置。调用该方法刷新所有 sortable 的已缓存的项目位置。
• serialize()：序列化 sortable 的项目 id 为一个 form/ajax 可提交的字符串。调用该方法会产生一个可被追加到任何 url 中的哈希，以便简单地把一个新的项目顺序提交回服务器。
• toArray()：序列化 sortable 的项目 id 为一个字符串的数组。
• widget()：

3、事件

• 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 位置改变时触发该事件。

4、事件参数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 对象，表示被作为占位符使用的元素。