$(content).draggable('option');
option：
( 1 ) destroy：删除拖动方法。
( 2 ) disable：拖动方法失效。
( 3 ) enable：拖动方法生效。
( 4 ) option：参数，参数形式指定值 或 property 形式。
参数值形式：draggable ( 'option' , optionName , [value] );
property ：draggable ({optionName:value , optionName:value});
| 取值 | 初始值 | 功能说明 | 代码形式 | 补充 |
|---|---|---|---|---|
| addClasses | true | 性能调节 | .draggable({addClasses:false}) .draggable({'option','addClasses',false}) |
为 false，不调用jQueryUI提供的CSS的ui-draggable类 |
| appendTo | parent | 拖动到的位置 | .draggable({appendTo:'body'}) .draggable({'option','appendTo','body'}) |
未指定时，追加到与拖动元素相同的容器中。 |
| axis | false | 限制拖动方向为水平（x）或垂直（y） | .draggable({axis:'x'}) .draggable({'option','axis','x'}) |
|
| cancel | 限制指定元素拖动 | .draggable({cancel:'div'}) .draggable({'option','cancel','div'}) |
||
| connectToSortable | false | 使sortable方法中的拖动生效 | .draggable({connectToSortable:'url'}) .draggable({'option','connectToSortable':'url'}) |
若要生效，将helper设置为clone |
| helper | original | .draggable({helper:'clone'}) .draggable({'option','helper','clone'}) |
clone指元素复制后在拖动中显示，original指与光标重叠的方法拖动。 | |
| containment | false | 限制拖动范围 | .draggable({containment:'parent'}) .draggable({'option','containment','parent'}) |
'parent、document、window、x1,y1,x2,y2' |
| cursor | auto | 指定鼠标光标 | .draggable({cursor:'move'}) .draggable({'option','cursor','move'}) |
|
| cursorAt | false | 在拖动时光标的位置 | .draggable({cursorAt:{left:5}}) .draggable({'option','cursorAt','{left:5}'}) |
{top:n,left:n,right:n,bottom:n} |
| delay | 0 | 拖动延迟，单位毫秒 | .draggable({delay:500}) .draggable({'option','delay',500}) |
|
| distance | 1 | 拖动需要的最短距离，单位px | .draggable({distance:20}) .draggable({'option','distance',20}) |
元素被拖动超过了指定距离，才会移动 |
| grid | false | 以指定网格（x，y）坐标的方式移动 | .draggable({grid:[50,20]}) .draggable({'option','grid',[50,20]}) |
|
| handle | false | 在指定元素中可以拖动排序元素 | .draggable({handle:'p'}) .draggable({'option','handle','p'}) |
|
| iframeFix | false | 防止mouseover事件的动作 | .draggable({iframeFix:true}) .draggable({'option','iframeFix',true}) |
在iframe上，拖动其他元素时，要防止mouseover事件动作 |
| opacity | false | 元素拖动时的不透明度 | .draggable({opacity:0.5}) .draggable({'option','opacity',0.5}) |
|
| refreshPositions | false | 计算鼠标拖动时的拖动坐标 | .draggable({refreshPositions:true}) .draggable({'option','refreshPositions',true}) |
耗费资源的精细动作，会使性能变差 |
| revert | false | 返回拖动元素的原位置 | .draggable({revert:true}) .draggable({'option','revert',true}) |
拖动结束后，返回到原来的位置，true、false、valid、invalid |
| revertDuration | 500 | 拖动结束时动画时间，单位毫秒 | .draggable({revertDuration:1000}) .draggable({'option','revertDuration',1000}) |
拖动结束后，返回到原来的位置，以微妙为单位指定动画结束时间 |
| scope | default | 将拖动元素细致分组 | .draggable({scope:'tasks'}) .draggable({'option','scope','tasks'}) |
对于drop功能的accept被设定的元素，在需要进一步分组时使用 |
| scroll | true | 设置自动滚动条 | .draggable({scroll:true}) .draggable({'option','scroll',true}) |
是否有滚动条 |
| scrollSensitivity | 20 | 一像素为单位指定鼠标箭头与显示领域间的距离 | .draggable({scrollSensitivity:40}) .draggable({'option','scrollSensitivity',40}) |
|
| scrollSpeed | 20 | 滚动的速率 | .draggable({scrollSpeed:40}) .draggable({'option','scrollSpeed',40}) |
在scrollSensitivity中指定的值中指定页面滚动时加入鼠标箭头距离后的速率 |
| snap | false | 向指定元素附近移动时是否吸附 | .draggable({snap:true}) .draggable({'option','snap',true}) |
|
| snapMode | both | 吸附位置 | .draggable({snapMode:'outer'}) .draggable({'option','snapMode','outer'}) |
inner、outer、both |
| snapTolerance | 20 | 最小的吸附动画效果距离 | .draggable({snapTolerance:40}) .draggable({'option','snapTolerance',40}) |
|
| stack | false | 拖动分组的拖动元素时，是当前元素始终处于最前面 | .draggable({stack:{group:'products',min:50}}) .draggable({'option','stack',{group:'products',min:50}) |
元素不会在比min中指定的层级更下方显示 |
| zindex | false | 指定拖动元素的重叠顺序 | .draggable({zindex:1000}) .draggable({'option','zindex',1000}) |
数字越大，越显示在前面 |
调用事件
调用事件名时，在第一个参数中获取event的内容，在第二个参数中获取ui的元素。ui元素的取值如下：
(1) ui.helper：表示拖动中元素helper的jQuery对象。
(2) ui.position：可从Offset元素中参照拖动元素的helper的相对位置，包括top与left属性。
(3) ui.offset：可从页中参照拖动元素的helper的相对位置，包括top与left属性。
事件选项：
| 选项名 | 值类型 | 事件名 | 功能说明 | 代码形式 |
|---|---|---|---|---|
| start | function | dragstart | 指定拖动开始时的事件内容 | .draggable({start:function(event,ui){…}}) .bind('dragstart',function(event,ui){…}) |
| drag | function | drag | 指定拖动过程中的事件内容 | .draggable({drag:function(event,ui){…}}) .bind('drag',function(event,ui){…}) |
| stop | function | dragstop | 指定拖动结束时的事件内容 | .draggable({stop:function(event,ui){…}}) .bind('dragstop',function(event,ui){…}) |