排序（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选项来允许在列之间进行排序。
实例
jQuery UI 排序（Sortable） - 门户组件（Portlets） 订阅Lorem ipsum dolor sit amet, consectetuer adipiscing elit新闻Lorem ipsum dolor sit amet, consectetuer adipiscing elit购物Lorem ipsum dolor sit amet, consectetuer adipiscing elit链接Lorem ipsum dolor sit amet, consectetuer adipiscing elit图像Lorem ipsum dolor sit amet, consectetuer adipiscing elit
运行实例 »
点击 "运行实例" 按钮查看在线实例