jQuery UI 实例 – 拖动（Draggable）

默认功能

在任意的 DOM 元素上启用 draggable 功能。通过鼠标点击并在视区中拖动来移动 draggable 对象。

  
  
  
  
  
  
  
  


 

  
请拖动我！

 
 

查看演示

自动滚动

当 draggable 移动到视区外时自动滚动文档。设置 scroll 选项为 true 来启用自动滚动，当滚动触发时进行微调，滚动速度是通过 scrollSensitivity 和 scrollSpeed 选项设置的。

  
  
  
  
  
  
  
  


 

  
Scroll 设置为 true，默认设置

 

  
scrollSensitivity 设置为 100

 

  
scrollSpeed 设置为 100

 

 
 

查看演示

约束运动

通过定义 draggable 区域的边界来约束每个 draggable 的运动。设置 axis 选项来限制 draggable 的路径为 x 轴或者 y 轴，或者使用 containment 选项来指定一个父级的 DOM 元素或者一个 jQuery 选择器，比如 'document.'。

  
  
  
  
  
  
  
  


 
沿着轴约束运动：
 

  
只能垂直拖拽

 

  
只能水平拖拽

 
或者在另一个 DOM 元素中约束运动：

  

    
我被约束在盒子里
  
 
  

    
我被约束在父元素内
  

 
 

查看演示

光标样式

当拖拽对象时定位光标。默认情况下，光标是出现在被拖拽对象的中间。使用 cursorAt 选项来指定相对于 draggable 的另一个位置（指定一个相对于 top、right、bottom、left 的像素值）。通过提供一个带有有效的 CSS 光标值的 cursor 选项，来自定义光标的外观。有效的 CSS 光标值包括：default、move、pointer、crosshair，等等。

  
  
  
  
  
  
  
  


 

  
我总是在中间（相对于鼠标）

 

  
我的光标是在 left -5 和 top -5

 

  
我的光标位置只控制了 'bottom' 值

 
 

查看演示

延迟开始

通过 delay 选项设置延迟开始拖拽的毫秒数。通过 distance 选项设置光标被按下且拖拽指定像素后才允许拖拽。

  
  
  
  
  
  
  
  


 

  
只有把我拖拽了 20 像素后，拖拽才开始

 

  
不管 distance 是多少，您都必须拖拽并等待 1000ms 后拖拽才开始

 
 

查看演示

事件

draggable 上的 start、drag 和 stop 事件。拖拽开始时触发 start 事件，拖拽期间触发 drag 事件，拖拽停止时触发 stop 事件。

  
  
  
  
  
  
  
  


 

 
  
请拖拽我，触发一连串的事件。
 
  

    
"start" 被调用 0x
    
"drag" 被调用 0x
    
"stop" 被调用 0x
  

 
 

查看演示

Handles

只有当光标在 draggable 上指定部分时才允许拖拽。使用 handle 选项来指定用于拖拽对象的元素（或元素组）的 jQuery 选择器。

或者当光标在 draggable 内指定元素（或元素组）上时不允许拖拽。使用 cancel 选项来指定取消拖拽功能的 jQuery 选择器。

  
  
  
  
  
  
  
  


 

  
您只可以在这个范围内拖拽我

 

  
您可以把我向四周拖拽…
  
…但是您不可以在这个范围内拖拽我

 
 

查看演示

还原位置

当带有布尔值 revert 选项的 draggable 停止拖拽时，返回 draggable（或它的助手）到原始位置。

  
  
  
  
  
  
  
  


 

  
还原

 

  
还原助手

 
 

查看演示

对齐到元素或网格

对齐 draggable 到 DOM 元素的内部或外部边界。使用 snap、snapMode（inner, outer, both）和 snapTolerance（当调用对齐时，draggable 与元素之间的距离，以像素为单位）选项。

或者对齐 draggable 到网格。通过 grid 选项设置网格单元的尺寸（以像素为单位的高度或宽度）。

  
  
  
  
  
  
  
  


 

  
我是对齐目标

 


 

  
默认（snap: true），对齐到所有其他的 draggable 元素

 

  
我只对齐到大盒子

 

  
我只对齐到大盒子的外边缘

 

  
我对齐到一个 20 x 20 网格

 

  
我对齐到一个 80 x 80 网格

 
 

查看演示

视觉反馈

给用户提供反馈，就像以助手方式拖拽对象一样。helper 选项接受值 'original'（用光标移动 draggable 对象），'clone'（用光标移动 draggable 的副本），或者一个返回 DOM 元素的函数（该元素在拖拽期间显示在光标附近）。通过 opacity 选项控制助手的透明度。

为了区别哪一个 draggable 正在被拖拽，让在运动中的 draggable 保持最前。如果正在拖拽，使用 zIndex 选项来设置助手的高度 z-index，或者使用 stack 选项来确保当停止拖拽时，最后一个被拖拽的项目总是出现在同组其他项目的上面。

  
  
  
  
  
  
  
  


 
助手：
 

  
原始的

 

  
半透明的克隆

 

  
自定义助手（与 cursorAt 结合）

 
堆叠：

  

    
我们是 draggables..
  
 
  

    
..它的 z-index 是自动控制的..
  
 
  

    
..带有 stack 选项。
  

 
 

查看演示

jQuery UI Draggable + Sortable

Draggable 与 Sortable 的无缝交互。

  
  
  
  
  
  
  
  


 

  
请拖拽我

 

  
Item 1
  
Item 2
  
Item 3
  
Item 4
  
Item 5

 
 

查看演示