排序（Sortable）
使用鼠标调整列表中或者网格中元素的排序。
如需了解更多有关 sortable 交互的细节，请查看 API 文档 可排序小部件（Sortable Widget）。
默认功能
在任意的 DOM 元素上启用 sortable 功能。通过鼠标点击并拖拽元素到列表中的一个新的位置，其它条目会自动调整。默认情况下，sortable 各个条目共享draggable属性。
实例
jQuery UI 排序（Sortable） - 默认功能
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
运行实例 »
点击 "运行实例" 按钮查看在线实例
连接列表
通过向connectWith选项传递一个选择器，来把一个列表中的元素排序到另一个列表中，反之亦然。最简单的办法是将带有某个 CSS class 的所有相关的列表分组，然后传递该 class 到 sortable 函数（比如，connectWith: '.myclass'）。
实例
jQuery UI 排序（Sortable） - 连接列表
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
运行实例 »
点击 "运行实例" 按钮查看在线实例
标签页连接列表
通过放置列表项到顶部适当的标签页中，来把一个列表中的元素排序到另一个列表中，反之亦然。
延迟开始
通过时间延迟和距离延迟来防止意外的排序。通过delay选项设置开始排序之前必须拖拽的毫秒数。通过distance选项设置开始排序之前必须拖拽的像素数。
实例
jQuery UI 排序（Sortable） - 延迟开始 时间延迟 300ms：
- Item 1
- Item 2
- Item 3
- Item 4
距离延迟 15px：
- Item 1
- Item 2
- Item 3
- Item 4
运行实例 »
点击 "运行实例" 按钮查看在线实例
显示为网格
让 sortable 条目显示为网格，使用 CSS 使得它们带有相同的尺寸且浮动显示。
放置占位符
当拖拽一个 sortable 条目到一个新的位置时，其他条目将为该条目腾出空间。向placeholder选项传递一个 class 来定义可视化的空白的样式。使用布尔值的forcePlaceholderSize选项来设置占位符的尺寸。
实例
jQuery UI 排序（Sortable） - 放置占位符
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
运行实例 »
点击 "运行实例" 按钮查看在线实例
处理空列表
通过把 选项设置为false，来阻止一个列表中的所有条目被放置到一个单独的空列表中。默认情况下，sortable 条目可被放置到空的列表中。
实例
jQuery UI 排序（Sortable） - 处理空列表
- 可被放置到..
- ..一个空列表中
- Item 3
- Item 4
- Item 5
- 不可被放置到..
- ..一个空列表中
- Item 3
- Item 4
- Item 5
运行实例 »
点击 "运行实例" 按钮查看在线实例
包含/排除条目
指定通过向items选项传递一个 jQuery 选择器哪些项目可排序。该选项之外的项目则是不可排序的，同时它们也不是 sortable 条目的有效的目标。
如果只想防止特定的条目排序，则向cancel选项传递一个 jQuery 选择器。已取消的条目依然是其他条目的有效的排序目标。
实例
jQuery UI 排序（Sortable） - 包含/排除条目 指定哪个条目是 sortable：
- Item 1
- （我不是 sortable 或者一个放置目标）
- （我不是 sortable 或者一个放置目标）
- Item 4
取消排序（但作为放置目标）：
- Item 1
- （我不是 sortable）
- （我不是 sortable）
- Item 4
运行实例 »
点击 "运行实例" 按钮查看在线实例
门户组件（Portlets）
启用门户组件（样式化的 div）作为 sortable，并使用connectWith选项来允许在列之间进行排序。