部件

动画

UI/API/1.7/Draggable

概述
参数
事件
方法
主题

jQuery UI Draggable

jQuery UI Draggable 插件可以使被选择的元素随着鼠标移动实现拖动.

可拖动的元素得到一个ui-draggable类. 拖动中的元素始终得到ui-draggable-dragging类. 假如你不仅仅只想要拖动,而是想要拖动并且填充,那么请看看jQuery UI Droppable 插件,它提供一个可以被填充的目标.

所有的回调函数(start, stop, drag)接受两个参数: 浏览器事件和ui对象, 此对象请查看下面的文档 :

ui.helper - 被拖动的jQuery辅助对象
ui.position - 辅助对象相对于上级元素的当前位置, 使用{ top, left }
ui.offset - 辅助对象相对于页面的当前绝对位置, 使用{ top, left }

其他附加文件

UI Core

使用默认参数初始化一个draggable.

$("#draggable").draggable();

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="ui/ui.core.js"></script>
  <script type="text/javascript" src="ui/ui.draggable.js"></script>
  <style type="text/css">
    #draggable { width: 100px; height: 70px; background: silver; }
  </style>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#draggable").draggable();
  });
  </script>
</head>
<body style="font-size:62.5%;">
  
<div id="draggable">Drag me</div>

</body>
</html>

addClasses

类型:

Boolean

默认值:

true

假如设定为false,可以防止ui-draggable类在进行时添加.这可能会使在初始化数百个元素执行.draggable()时使性能得到理想的优化
代码示例
使用指定的addClasses参数初始化一个draggable.
```
$('.selector').draggable({ addClasses: false });
```
在初始化后设置或者获取addClasses参数.
```
//获取
var addClasses = $('.selector').draggable('option', 'addClasses');
//设置
$('.selector').draggable('option', 'addClasses', false);
```
appendTo

类型:

Element, Selector

默认值:

'parent'

使用appendTo参数使 draggable 辅助容器在拖动时被转到或选择指定的元素. 默认情况下,辅助容器被添加到和draggable相同的容器中.
代码示例
使用指定的appendTo参数初始化一个draggable.
```
$('.selector').draggable({ appendTo: 'body' });
```
在初始化后设置或者获取appendTo参数.
```
//获取
var appendTo = $('.selector').draggable('option', 'appendTo');
//设置
$('.selector').draggable('option', 'appendTo', 'body');
```
axis

类型:

String

默认值:

false

设置拖动是水平方向还是垂直方向,也可以是水平与垂直方向. 允许使用的值: 'x', 'y'.
代码示例
使用指定的axis参数初始化一个draggable.
```
$('.selector').draggable({ axis: 'x' });
```
在初始化后设置或者获取axis参数.
```
//获取
var axis = $('.selector').draggable('option', 'axis');
//设置
$('.selector').draggable('option', 'axis', 'x');
```
cancel

类型:

Selector

默认值:

':input,option'

禁止在指定的元素上进行拖动
代码示例
使用指定的cancel参数初始化一个draggable.
```
$('.selector').draggable({ cancel: 'button' });
```
在初始化后设置或者获取cancel参数.
```
//获取
var cancel = $('.selector').draggable('option', 'cancel');
//设置
$('.selector').draggable('option', 'cancel', 'button');
```
connectToSortable

类型:

Selector

默认值:

false

允许draggable填充到一个指定的sortables. 如果使用了这个参数 (为了更好的实现效果,helper必须设置为'clone'),一个draggable可以被填充到一个sortable列表中,并成为它的一部分.
注: 这个参数如果指定为选择器数组,则会被删除
代码示例
使用指定的connectToSortable参数初始化一个draggable.
```
$('.selector').draggable({ connectToSortable: 'ul#myList' });
```
在初始化后设置或者获取connectToSortable参数.
```
//获取
var connectToSortable = $('.selector').draggable('option', 'connectToSortable');
//设置
$('.selector').draggable('option', 'connectToSortable', 'ul#myList');
```
containment

类型:

Selector, Element, String, Array

默认值:

false

约束拖动在一个元素或者一个范围之内. 允许使用的字符值: 'parent', 'document', 'window', [x1, y1, x2, y2].
代码示例
使用指定的containment参数初始化一个draggable.
```
$('.selector').draggable({ containment: 'parent' });
```
在初始化后设置或者获取containment参数.
```
//获取
var containment = $('.selector').draggable('option', 'containment');
//设置
$('.selector').draggable('option', 'containment', 'parent');
```

cursor

类型:: String
默认值:: 'auto'

设置拖动时的鼠标指针样式.

代码示例

使用指定的cursor参数初始化一个draggable.

$('.selector').draggable({ cursor: 'crosshair' });

在初始化后设置或者获取cursor参数.

//获取
var cursor = $('.selector').draggable('option', 'cursor');
//设置
$('.selector').draggable('option', 'cursor', 'crosshair');

cursorAt

类型:

Object

默认值:

false

设置在进行拖动时鼠标总是出现在辅助元素的固定位置. 坐标可使用散列或者相结合的一个或两个键值: { top, left, right, bottom }.
代码示例
使用指定的cursorAt参数初始化一个draggable.
```
$('.selector').draggable({ cursorAt: { left: 5 } });
```
在初始化后设置或者获取cursorAt参数.
```
//获取
var cursorAt = $('.selector').draggable('option', 'cursorAt');
//设置
$('.selector').draggable('option', 'cursorAt', { left: 5 });
```
delay

类型:

Integer

默认值:

0

在鼠标按下持续了多少毫秒后开始拖动. 这个参数可以防止对一些元素的意外拖动.
代码示例
使用指定的delay参数初始化一个draggable.
```
$('.selector').draggable({ delay: 500 });
```
在初始化后设置或者获取delay参数.
```
//获取
var delay = $('.selector').draggable('option', 'delay');
//设置
$('.selector').draggable('option', 'delay', 500);
```
distance

类型:

Integer

默认值:

1

Distance参数设置当鼠标按下并拖动了多少个像素之后元素才开始进行拖动.这个参数可以防止对一些元素的意外拖动.
代码示例
使用指定的distance参数初始化一个draggable.
```
$('.selector').draggable({ distance: 30 });
```
在初始化后设置或者获取distance参数.
```
//获取
var distance = $('.selector').draggable('option', 'distance');
//设置
$('.selector').draggable('option', 'distance', 30);
```
grid

类型:

Array

默认值:

false

设置辅助在目标容器中的x和y边距(单位:像素). 数组值: [x, y]
代码示例
使用指定的grid参数初始化一个draggable.
```
$('.selector').draggable({ grid: [50, 20] });
```
在初始化后设置或者获取grid参数.
```
//获取
var grid = $('.selector').draggable('option', 'grid');
//设置
$('.selector').draggable('option', 'grid', [50, 20]);
```
handle

类型:

Element, Selector

默认值:

false

如果设定了此参数,那么拖动会在指定的元素上开始.
代码示例
使用指定的handle参数初始化一个draggable.
```
$('.selector').draggable({ handle: 'h2' });
```
在初始化后设置或者获取handle参数.
```
//获取
var handle = $('.selector').draggable('option', 'handle');
//设置
$('.selector').draggable('option', 'handle', 'h2');
```
helper

类型:

String, Function

默认值:

'original'

允许使用一个辅助元素来进行拖动时展示. 允许使用的值: 'original', 'clone', Function. 如果指定一个函数,它必须返回一个 DOMElement.
代码示例
使用指定的helper参数初始化一个draggable.
```
$('.selector').draggable({ helper: 'clone' });
```
在初始化后设置或者获取helper参数.
```
//获取
var helper = $('.selector').draggable('option', 'helper');
//设置
$('.selector').draggable('option', 'helper', 'clone');
```
iframeFix

类型:

Boolean, Selector

默认值:

false

在拖动时防止iframes捕获鼠标拖动事件,配合cursorAt非常有用,或者在任何情况下,如果鼠标光标不超过辅助对象.如果设置为true,会有一个透明的区域覆盖页面上所有的iframes.如果提供一个选择器,则所有匹配的iframes会被一个区域覆盖.
代码示例
使用指定的iframeFix参数初始化一个draggable.
```
$('.selector').draggable({ iframeFix: true });
```
在初始化后设置或者获取iframeFix参数.
```
//获取
var iframeFix = $('.selector').draggable('option', 'iframeFix');
//设置
$('.selector').draggable('option', 'iframeFix', true);
```
opacity

类型:

Float

默认值:

false

设置辅助元素在拖动时的不透明度.
代码示例
使用指定的opacity参数初始化一个draggable.
```
$('.selector').draggable({ opacity: 0.35 });
```
在初始化后设置或者获取opacity参数.
```
//获取
var opacity = $('.selector').draggable('option', 'opacity');
//设置
$('.selector').draggable('option', 'opacity', 0.35);
```
refreshPositions

类型:

Boolean

默认值:

false

如果设置为true,所有的droppable位置会计算所有的鼠标移动. 注意: 这能解决高度动态网页的问题,但是会大大降低性能.
代码示例
使用指定的refreshPositions参数初始化一个draggable.
```
$('.selector').draggable({ refreshPositions: true });
```
在初始化后设置或者获取refreshPositions参数.
```
//获取
var refreshPositions = $('.selector').draggable('option', 'refreshPositions');
//设置
$('.selector').draggable('option', 'refreshPositions', true);
```
revert

类型:

Boolean, String

默认值:

false

如果设置为true,拖动元素会在拖动结束后返回他开始的位置. 允许的字符值: 'valid', 'invalid'. 如果设置为 invalid, 返回只会发生在draggable没有填充到droppable中时. 为 valid时, 情况相反.
代码示例
使用指定的revert参数初始化一个draggable.
```
$('.selector').draggable({ revert: true });
```
在初始化后设置或者获取revert参数.
```
//获取
var revert = $('.selector').draggable('option', 'revert');
//设置
$('.selector').draggable('option', 'revert', true);
```
revertDuration

类型:

Integer

默认值:

500

返回动画持续的时间(单位:毫秒). 如果 revert 设置为 false,忽略此参数.
代码示例
使用指定的revertDuration参数初始化一个draggable.
```
$('.selector').draggable({ revertDuration: 1000 });
```
在初始化后设置或者获取revertDuration参数.
```
//获取
var revertDuration = $('.selector').draggable('option', 'revertDuration');
//设置
$('.selector').draggable('option', 'revertDuration', 1000);
```
scope

类型:

String

默认值:

'default'

设置draggable和deoppable项所属的组. 除了droppable设置为允许的参数,和droppable相同组的draggable也会被droppable接受.
代码示例
使用指定的scope参数初始化一个draggable.
```
$('.selector').draggable({ scope: 'tasks' });
```
在初始化后设置或者获取scope参数.
```
//获取
var scope = $('.selector').draggable('option', 'scope');
//设置
$('.selector').draggable('option', 'scope', 'tasks');
```
scroll

类型:

Boolean

默认值:

true

如果设置为true,在拖动容器时将会自动滚动.
代码示例
使用指定的scroll参数初始化一个draggable.
```
$('.selector').draggable({ scroll: false });
```
在初始化后设置或者获取scroll参数.
```
//获取
var scroll = $('.selector').draggable('option', 'scroll');
//设置
$('.selector').draggable('option', 'scroll', false);
```
scrollSensitivity

类型:

Integer

默认值:

20

容器边缘和浏览器边缘相聚多少个像素时开始滚动. 距离是相对于鼠标的,不是相对于容器的.
代码示例
使用指定的scrollSensitivity参数初始化一个draggable.
```
$('.selector').draggable({ scrollSensitivity: 40 });
```
在初始化后设置或者获取scrollSensitivity参数.
```
//获取
var scrollSensitivity = $('.selector').draggable('option', 'scrollSensitivity');
//设置
$('.selector').draggable('option', 'scrollSensitivity', 40);
```
scrollSpeed

类型:

Integer

默认值:

20

根据scrollSensitivity的距离相应的滚动条滚动的速度.
代码示例
使用指定的scrollSpeed参数初始化一个draggable.
```
$('.selector').draggable({ scrollSpeed: 40 });
```
在初始化后设置或者获取scrollSpeed参数.
```
//获取
var scrollSpeed = $('.selector').draggable('option', 'scrollSpeed');
//设置
$('.selector').draggable('option', 'scrollSpeed', 40);
```
snap

类型:

Boolean, Selector

默认值:

false

如果设置一个选择器或者设置为true(相当于 '.ui-draggable'), draggable会在接近所选择的元素的边缘时自动吸附它的边缘.
代码示例
使用指定的snap参数初始化一个draggable.
```
$('.selector').draggable({ snap: true });
```
在初始化后设置或者获取snap参数.
```
//获取
var snap = $('.selector').draggable('option', 'snap');
//设置
$('.selector').draggable('option', 'snap', true);
```
snapMode

类型:

String

默认值:

'both'

确定draggable要吸附目标的那个边缘. snap 设置为 false时忽略此参数. 允许使用的值: 'inner', 'outer', 'both'
代码示例
使用指定的snapMode参数初始化一个draggable.
```
$('.selector').draggable({ snapMode: 'outer' });
```
在初始化后设置或者获取snapMode参数.
```
//获取
var snapMode = $('.selector').draggable('option', 'snapMode');
//设置
$('.selector').draggable('option', 'snapMode', 'outer');
```
snapTolerance

类型:

Integer

默认值:

20

设置在距离被吸附的元素边缘多少个像素时发生吸附. snap 设置为false时忽略此参数.
代码示例
使用指定的snapTolerance参数初始化一个draggable.
```
$('.selector').draggable({ snapTolerance: 40 });
```
在初始化后设置或者获取snapTolerance参数.
```
//获取
var snapTolerance = $('.selector').draggable('option', 'snapTolerance');
//设置
$('.selector').draggable('option', 'snapTolerance', 40);
```
stack

类型:

Object

默认值:

false

在定义的组(散列中的'group'键,接受jQuery selector)中自动控制z-Index,使其总是在被拖动后元素的前方.此参数非常游泳,譬如应用于窗口管理器中.可选择设置'min'键,zIndex的值不能低于该值.
代码示例
使用指定的stack参数初始化一个draggable.
```
$('.selector').draggable({ stack: { group: 'products', min: 50 } });
```
在初始化后设置或者获取stack参数.
```
//获取
var stack = $('.selector').draggable('option', 'stack');
//设置
$('.selector').draggable('option', 'stack', { group: 'products', min: 50 });
```
zIndex

类型:

Integer

默认值:

false

设置辅助在拖动时的z-index.
代码示例
使用指定的zIndex参数初始化一个draggable.
```
$('.selector').draggable({ zIndex: 2700 });
```
在初始化后设置或者获取zIndex参数.
```
//获取
var zIndex = $('.selector').draggable('option', 'zIndex');
//设置
$('.selector').draggable('option', 'zIndex', 2700);
```

start

类型:

dragstart

在拖动开始时触发此事件.
代码示例
提供一个回调函数来处理start事件作为初始化选项.
```
$('.selector').draggable({
   start: function(event, ui) { ... }
});
```
使用dragstart类型来绑定start事件.
```
$('.selector').bind('dragstart', function(event, ui) {
  ...
});
```
drag

类型:

drag

在拖动进行时触发此事件.
代码示例
提供一个回调函数来处理drag事件作为初始化选项.
```
$('.selector').draggable({
   drag: function(event, ui) { ... }
});
```
使用drag类型来绑定drag事件.
```
$('.selector').bind('drag', function(event, ui) {
  ...
});
```
stop

类型:

dragstop

当拖动停止时触发此事件.
代码示例
提供一个回调函数来处理 stop 事件作为初始化选项.
```
$('.selector').draggable({
   stop: function(event, ui) { ... }
});
```
使用dragstop类型来绑定stop事件.
```
$('.selector').bind('dragstop', function(event, ui) {
  ...
});
```

destroy

方法签名:

.draggable( 'destroy' )

完全移除拖动功能. 这将使元素返回到之前的初始化状态.
disable

方法签名:

.draggable( 'disable' )

关闭拖动.
enable

方法签名:

.draggable( 'enable' )

打开拖动.
option

方法签名:

.draggable( 'option' , optionName , [value] )

获取或者设置拖动参数. 如果没有提供参数值则是获取.

jQuery UI Draggable插件使用jQuery UI CSS 框架的外观和风格，包括颜色和背景纹理.我们建议您使用ThemeRoller工具来创建和下载的自定义主题，很容易建立和维护.

如果有更深层次的个性化需要，有特定类别的工具ui.draggable.css样式可供参考，可以修改这些参考。这些课程是下面以高亮和粗体显示的。

jQuery UI CSS Framework classes示例

注：这是一个示例拖曳插件所产生的标记,而不是你应该使用的标记.创建一个拖动唯一需要的标记是 <div></div>.

部件

动画

UI/API/1.7/Draggable

jQuery UI Draggable

概述

其他附加文件

示例

参数

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

事件

代码示例

代码示例

代码示例

方法

主题

jQuery UI CSS Framework classes示例