jquery ui 翻译!

概览][原文翻译]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'});[获取属性值]//gettervarappendTo=$('.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'[产生影响]拖动过程中帮助用户知道当前拖动