jquery ui drap
[原文翻译]
JQueryUIDraggable插件用来使选中的元素可以通过鼠标拖动.
Draggable的元素受影响css:ui-draggable,拖动过程中的css:ui-draggable-dragging.
如果需要的不仅仅是拖,而是一个完整的拖放功能,请参阅JQueryUI的Droppable插件,该插件提供了一个draggable放的目标.
所有的回调函数(start,stop,drag等事件)接受两个参数:
event:浏览器原生的事件
ui:一个JQuery的ui对象,其中有以下主要属性
ui.helper:正在拖动的元素的JQuery包装对象,ui.helper.context可以获取到原生的DOM元素.
ui.position:ui.helper(也就是我们要拖动的元素)相对于父元素(包含自己的元素,如果是顶层,对应body)的偏移,值是一个对象{top,left}----也就是可以用ui.position.top获取到该元素与父元素的top当前偏移
ui.offset:与ui.position同意,这里表示的是和浏览器内容区域左上边界的偏移(注意,是内容区域,而不是html的body区域.html的body在默认情况下,各种浏览器中都会相对offset有偏移的.)
[选项]
addClasses:
[类型]Boolean(布尔值)
[默认值]true
[产生影响]
用来设置是否给draggable元素通过ui-draggable样式才装饰它.主要为了在通过.draggable()初始化很多(成百个)元素的时候优化性能考虑,但是,这个选项的设置,不会影响ui-draggable-dragging样式改变拖动过程样式.
true表示ui-draggable样式被添加到该元素.
false表示ui-draggable样式不被添加到该元素.
[代码示例]draggable其他选项的初始化,获取属性值,设置属性值部分除有特殊功能,不再赘述,仅粘贴代码.
[初始化]
$('.selector').draggable({addClasses:false});
将.selector选择器选中的元素渲染成为一个可拖动控件,不为其添加ui-draggable样式
[获取属性值]
varaddClasses=$('#draggable').draggable('option','addClasses');
获取.selector选择器选中的可拖动控件的addClasses选项的值.
[设置属性值]
$('.selector').draggable('option','addClasses',false);
将.selector选择器选中的可拖动控件的addClasses选项值设置为false.
appendTo:
[类型]Element,Selector(HTML元素对象或选择器)
[默认值]'parent'父元素
[产生影响]
用来指定控件在拖动过程中ui.helper的容器,默认情况下,ui.helper使用和初始定义的draggable相同的容器,也就是其父元素.
[代码示例]
[初始化]
$('.selector').draggable({appendTo:'body'});
[获取属性值]
//getter
varappendTo=$('.selector').draggable('option','appendTo');
[设置属性值]
//setter
$('.selector').draggable('option','appendTo','body');.
axis:
[类型]String,Boolean(可取的值有'x','y',false)
'x':只能水平拖动
'y':只能垂直拖动
false:既可以水平,也可以垂直拖动.
[默认值]false,不限制拖动的方向
[产生影响]
约束拖动过程中的取向.
[代码示例]
[初始化]
$('.selector').draggable({axis:'x'});
[获取属性值]
varaxis=$('.selector').draggable('option','axis');
[设置属性值]
$('.selector').draggable('option','axis','x');
cancel:
[类型]选择器
[默认值]':input,option'
[产生影响]
通过选择器指定这类元素不能被渲染成draggable控件.
[代码示例]
[初始化]
$('.selector').draggable({cancel:'button'});
[获取属性值]
varcancel=$('.selector').draggable('option','cancel');
[设置属性值]
$('.selector').draggable('option','cancel','button');
connectToSortable:此选项需要和sortable联合工作,再议.
[类型]选择器
[默认值]':input,option'
[产生影响]
通过选择器指定这类元素不能被渲染成draggable控件.
[代码示例]
[初始化]
$('.selector').draggable({cancel:'button'});
[获取属性值]
varcancel=$('.selector').draggable('option','cancel');
[设置属性值]
$('.selector').draggable('option','cancel','button');
containment:
[类型]选择器,元素,字符串,数组.
选择器:只能在选择器约束的元素内拖动
元素:只能在给定的元素内拖动
字符串:
parent:只能在父容器内拖动
document:在当前html文档的document下可拖动,超出浏览器窗口范围时,自动出现滚动条
widow:只能在当前浏览器窗口的内容区域拖动,拖动超出当前窗口范围,不会导致出现滚动条...
数组:[x1,y1,x2,y2]以[开始水平坐标,开始垂直坐标,结束水平坐标,结束垂直坐标]的方式划定一个区域,只能在此区域内拖动.这种方式指定时,值是相对当前浏览器窗口内容区域左上角的偏移值.
false:不限制拖动的活动范围
[默认值]false
[产生影响]
影响指定可拖动控件的活动区域.
[代码示例]
[初始化]
$('.selector').draggable({containment:'parent'});
[获取属性值]
varcontainment=$('.selector').draggable('option','containment');
[设置属性值]
$('.selector').draggable('option','containment','parent');
cursor:
[类型]字符串.
[默认值]'auto'
[产生影响]
影响指定可拖动控件在拖动过程中的鼠标样式,该样式设定之后,需要控件的原始元素支持指定的cursor样式,如果指定的值原始元素不支持,则使用原始元素默认的cursor样式.比如,$('input[type=button]').draggable({cursor:'crosshair'});由于button不支持crosshair这个鼠标样式,所以,会以默认形式显示.
[代码示例]
[初始化]
$('.selector').draggable({cursor:'crosshair'});
[获取属性值]
varcursor=$('.selector').draggable('option','cursor');
[设置属性值]
$('.selector').draggable('option','cursor','crosshair');
cursorAt:
[类型]对象
通过设置对象的top,left,right,bottom的属性值中的一个或两个来确定位置.
[默认值]false
[产生影响]
在拖动控件的过程中,鼠标在控件上显示的位置,值为false(默认)时,从哪里点击开始拖动,鼠标位置就在哪里,如果设置了,就会在一个相对控件自身左上角偏移位置处,比如:$('.selector').draggable('option','cursorAt',{left:8,top:8});那么拖动过程中,鼠标就会在自身的左上角向下向右各偏移8像素处.
[代码示例]
[初始化]
$('.selector').draggable({cursor:'crosshair'});
[获取属性值]
varcursor=$('.selector').draggable('option','cursor');
[设置属性值]
$('.selector').draggable('option','cursor','crosshair');
delay:
[类型]整数,单位是毫秒
[默认值]0
[产生影响]
可拖动控件从鼠标左键按下开始,到拖动效果产生的延时.该选项可以被用来阻止一些不期望的点击带来的无效拖动.具体效果是:一次拖动,从鼠标左键按下,到delay指定的时间,如果鼠标左键还没有松开,那么就认为这次拖动有效,否则,认为这次拖动无效.
[代码示例]
[初始化]
$('.selector').draggable({delay:500});
[获取属性值]
vardelay=$('.selector').draggable('option','delay');
[设置属性值]
$('.selector').draggable('option','delay',500);
distance:
[类型]整数,单位是像素
[默认值]1
[产生影响]
可拖动控件从鼠标左键按下开始,到拖动效果产生的时鼠标必须产生的位移.该选项可以被用来阻止一些不期望的点击带来的无效拖动.具体效果是:一次拖动,从鼠标左键按下,只有当鼠标产生的位移达到distance指定的值时,才认为是有效的拖动.
[代码示例]
[初始化]
$('.selector').draggable({distance:30});
[获取属性值]
vardistance=$('.selector').draggable('option','distance');
[设置属性值]
$('.selector').draggable('option','distance',30);
grid:
[类型]数组[x,y],x代表水平大小,y代表垂直大小,单位是像素
[默认值]false
[产生影响]
可拖动控件拖动时采用grid的方式拖动,也就是说拖动过程中的单位是guid选项指定的数组描述的格子那么大.
[代码示例]
[初始化]
$('.selector').draggable({grid:[50,20]});
[获取属性值]
vargrid=$('.selector').draggable('option','grid');
[设置属性值]
$('.selector').draggable('option','grid',[50,20]);
handle:
[类型]选择器或元素
[默认值]false
[产生影响]
指定触发拖动的元素.用法:将一个id=window的div设置为可拖动控件,设置它的handle是该div中的一个id=title的span,那么,就只有在id=title的span上点击拖动才是有效的.注意:该元素一定要是可拖动控件的子元素.
[代码示例]
[初始化]
$('.selector').draggable({handle:'h2'});
[获取属性值]
varhandle=$('.selector').draggable('option','handle');
[设置属性值]
$('.selector').draggable('option','handle','h2');
helper:
[类型]字符串或函数
字符串取值:
'original':可拖动控件本身移动
'clone':将可拖动控件自身克隆一个移动,自身在原始位置不变
函数则必须返回一个DOM元素:以函数返回的DOM元素移动展现拖动的过程.
[默认值]'original'
[产生影响]
拖动过程中帮助用户知道当前拖动位置的元素.
[代码示例]
[初始化]
$('.selector').draggable({helper:'clone'});
[获取属性值]
varhelper=$('.selector').draggable('option','helper');
[设置属性值]
$('.selector').draggable('option','helper','clone');
iframeFix:
[类型]布尔值或选择器,选择器的选择结果需要是iframe元素
[默认值]false
[产生影响]
阻止拖动过程中由于鼠标指针在iframe区域移动,iframe对鼠标移动事件的默认响应.
如果设置为true,将会阻止拖动过程中当前页面上所有的iframe的mousemove事件,如果设置一个选择器,将会阻止指定的iframe的mousemove事件.
[代码示例]
[初始化]
$('.selector').draggable({iframeFix:true});
[获取属性值]
variframeFix=$('.selector').draggable('option','iframeFix');
[设置属性值]
$('.selector').draggable('option','iframeFix',true);
opacity:
[类型]浮点数值
[默认值]false
[产生影响]
拖动过程中helper(拖动时跟随鼠标移动的控件)的不透明度.
[代码示例]
[初始化]
$('.selector').draggable({opacity:0.35});
[获取属性值]
varopacity=$('.selector').draggable('option','opacity');
[设置属性值]
$('.selector').draggable('option','opacity',0.35);
refreshPositions:
[类型]Boolean
[默认值]false
[产生影响]
如果设置为true,所有的droppable位置会在每次mousemove事件中进行计算.
注意:该选项主要用于解决高级动态页面展现问题.慎用.
[代码示例]
[初始化]
$('.selector').draggable({refreshPositions:true});
[获取属性值]
varrefreshPositions=$('.selector').draggable('option','refreshPositions');
[设置属性值]
$('.selector').draggable('option','refreshPositions',true);
revert:
[类型]Boolean,字符串
[默认值]false
[产生影响]
影响一次拖动之后是否回归到原始位置.
true:每次拖动停止之后,元素自动回到原始位置
'invalid':除非是一个droppable并且被drop(放)成功了,才不将元素返回到原始位置.
'valid':除invalid之外的其他情况.
[代码示例]
[初始化]
$('.selector').draggable({revert:true});
[获取属性值]
varrevert=$('.selector').draggable('option','revert');
[设置属性值]
$('.selector').draggable('option','revert',true);
revertDuration:
[类型]整数
[默认值]500
[产生影响]
revert(回归到原始位置)整个过程需要的时间,单位是毫秒.如果设置revert选项设置为false,则忽略此属性.
[代码示例]
[初始化]
$('.selector').draggable({revertDuration:1000});
[获取属性值]
varrevertDuration=$('.selector').draggable('option','revertDuration');
[设置属性值]
$('.selector').draggable('option','revertDuration',1000);
scope:
[类型]字符串
[默认值]'default'
[产生影响]
该选项描述一个范围,和droppable的同名选项结合使用,droppable的accept选项用来设置可以接受的draggable控件,同时,可接受的drggable控件受scope选项约束,必须是同一个scope中的draggable和droppable才可以互相拖放.
例如:
$('#draggable_a').draggable({scope:'a'});
$('#draggable_b').draggable({scope:'b'});
$('#droppable_a').droppable({scope:'a'});
$('#droppable_b').droppable({scope:'b'});
droppable控件的accept选项默认是'*',看起来数draggable_a,draggable_b可以自由的放入到droppable_a和droppable_b中,但是,由于scope的约束,draggable_a只能放入到droppable_a,draggable_b只能发乳到droppable_b中.
注意:这个选项就和变量的名称空间的意义类似.默认值是'default',说明如果不指定,大家都还是有scope的,名字是default而已.
[代码示例]
[初始化]
$('.selector').draggable({scope:'tasks'});
[获取属性值]
varscope=$('.selector').draggable('option','scope');
[设置属性值]
$('.selector').draggable('option','scope','tasks');
scroll:
[类型]Boolean
[默认值]true
[产生影响]
如果设置为true,在拖动过程中超出可拖动控件容器的时候,容器自动增加滚动条
[代码示例]
[初始化]
$('.selector').draggable({scroll:false});
[获取属性值]
varscope=$('.selector').draggable('option','scope');
[设置属性值]
$('.selector').draggable('option','scroll',false);
scrollSensitivity:
[类型]整数值
[默认值]20
[产生影响]
滚动条的敏感度.
下面所属的鼠标指针是指在draggable控件移动过程中,鼠标所处位置.
鼠标指针和与draggable控件所在容器的边距离为多少的时候,滚动条开始滚动.
[代码示例]
[初始化]
$('.selector').draggable({scrollSensitivity:40});
[获取属性值]
varscrollSensitivity=$('.selector').draggable('option','scrollSensitivity');
[设置属性值]
$('.selector').draggable('option','scrollSensitivity',40);
scrollSpeed:
[类型]整数值
[默认值]20
[产生影响]
由于scrollSensitivity导致的滚动发生时,滚动条一次滚动多少像素值.
[代码示例]
[初始化]
$('.selector').draggable({scrollSpeed:40});
[获取属性值]
varscrollSpeed=$('.selector').draggable('option','scrollSpeed');
[设置属性值]
$('.selector').draggable('option','scrollSpeed',40);
snap:
[类型]Boolean,选择器
[默认值]false
[产生影响]
吸附功能,设置为true等价与设置选择器.ui-draggable,具体效果是在选择器指定的所有元素上,当前的draggable控件都可以实现吸附功能,吸附就是拖动过程中,靠近但是还没有挨上目标组件是,自动的将正在拖动的组件吸过去.
[代码示例]
[初始化]
$('.selector').draggable({snap:true});
[获取属性值]
varsnap=$('.selector').draggable('option','snap');
[设置属性值]
$('.selector').draggable('option','snap',true);
snapMode:
[类型]字符串,可选值如下
'inner':在指定的元素内部可以吸附
'outer':在指定元素外部可以吸附
'both':里面外面都可以吸附.
[默认值]'both'
[产生影响]
设定吸附时候的模式.
[代码示例]
[初始化]
$('.selector').draggable({snapMode:'outer'});
[获取属性值]
varsnapMode=$('.selector').draggable('option','snapMode');
[设置属性值]
$('.selector').draggable('option','snapMode','outer');
snapTolerance:
[类型]整数
[默认值]20
[产生影响]
设定离目标对象的边多少像素的时候,进行吸附.
[代码示例]
[初始化]
$('.selector').draggable({snap:true});
[获取属性值]
varsnap=$('.selector').draggable('option','snap');
[设置属性值]
$('.selector').draggable('option','snap',true);
stack:
[类型]对象{group:'.selector',min:50}
[默认值]false
[产生影响]
一次初始化一组draggable控件的时候,将其中的一些draggable控件以给定选择器选择,作为一组,这时,这一组draggable控件就可以实现当前被拖动的始终在最前效果,min用来指定这一组的z-index值的最小值.
[代码示例]
[初始化]
$('.selector').draggable({stack:{group:'products',min:50}});
[获取属性值]
varstack=$('.selector').draggable('option','stack');
[设置属性值]
$('.selector').draggable('option','stack',{group:'products',min:50});
zIndex:
[类型]整数
[默认值]false
[产生影响]
拖动时的helper(跟随鼠标移动的控件)的z-index值.z-index就是css中的层叠层数,数值越大,越在上层.
[代码示例]
[初始化]
$('.selector').draggable({zIndex:2700});
[获取属性值]
varzIndex=$('.selector').draggable('option','zIndex');
[设置属性值]
$('.selector').draggable('option','zIndex',2700);
[事件]
start:拖动开始,指鼠标按下,开始移动.
[类型]dragstart
[回调函数接受的参数]
event:原生的浏览器事件.
ui:JQuery的ui对象
this:当前拖动的控件DOM对象
drag:拖动过程中鼠标移动.
[类型]drag
[回调函数接受的参数]
event:原生的浏览器事件.
ui:JQuery的ui对象
this:当前拖动的控件DOM对象
stop:拖动结束.
[类型]dragstop
[回调函数接受的参数]
event:原生的浏览器事件.
ui:JQuery的ui对象
this:当前拖动的控件DOM对象
[代码示例]
初始化时设置事件.
$('.selector').draggable({
start:function(event,ui){alert(this);},
drag:function(event,ui){alert(this);},
stop:function(event,ui){alert(this);}
});
动态的绑定事件.动态绑定时候,使用的事件名就是事件的类型.
$(".selector").bind('dragstart',function(event,ui){
alert(this);
});
$(".selector").bind('drag',function(event,ui){
alert(this);
});
$(".selector").bind('dragstop',function(event,ui){
alert(this);
});
[方法]
destroy:完全移除一个可拖动控件,使其回退到该元素被初始化成可拖动控件之前的状态.
[代码示例]
$(".selector").progressbar('destroy');
将之前初始化的.selector指定的可拖动控件销毁,使其返回初始化之前的状态.
disable:将可拖动控件样式改变成为失效,与enable对应.
enable:将可拖动控件样式改变为允许,与disable对应.
option:获取或设置可拖动控件的选项,第二个参数是选项名,第三个参数是值.如果不指定值,就是获取,指定值,就是设置.
[总结]
addClasses:用来设置是否添加ui-draggable样式.
appendTo:设置追加到什么地方
axis:设置拖动的方向
cancel,handle:设置控制整个控件拖动动作的区域,cancel指定区域不能拖动,handle指定区域控制控件拖动.
connectToSortable:需要和sortable集成.
containment:设置控件可拖动范围
cursor,cursorAt:设置拖动过程中,鼠标的样式及相对空间自身的位置.
delay,distance:设置拖动的延迟,delay设置延迟时间,distance设置延迟距离,目的是防止误点击带来的不期望拖动.
grid:设置拖动过程移动的单位(以小格的方式移动)
helper:设置拖动过程中,跟随鼠标移动的组件.
iframeFix:解决拖动过程中与iframe层叠后的事件问题.
opacity:拖动过程helper的不透明度.
refreshPositions:设置后drop过程中,鼠标每次移动都会计算位置.
revert,revertDuration:设置撤销移动相关.
scope:设定draggable的域,用来和droppable结合使用时确定可放入的目标.
scroll,scrollSensitivity,scrollSpeed:设置拖动过程中带来的滚动条相关问题.
snap,snapMode,snapTolerance:设置吸附的相关属性.
stack,zIndex:设置控件的层次.