jQuery UI 实例 – 排序（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

标签页连接列表

通过放置列表项到顶部适当的标签页中，来把一个列表中的元素排序到另一个列表中，反之亦然。




  
  jQuery UI 排序（Sortable） - 标签页连接列表
  
  
  
  
  
  


 

  
    Nunc tincidunt
    Proin dolor
  
  
    
      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 使得它们带有相同的尺寸且浮动显示。




  
  jQuery UI 排序（Sortable） - 显示为网格
  
  
  
  
  
  


 

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12

放置占位符

当拖拽一个 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