JQueryUI-draggable参数中文详细说明

作者:小菜 更新时间:2025-02-26 点击数:
简介:·概述 在任何DOM元素启用拖动功能。

通过单击鼠标并拖动对象在窗口内的任何地方移动。

官方示例地址:http://jqueryui.com/demos/drag

【菜科解读】

·概述 在任何DOM元素启用拖动功能。

通过单击鼠标并拖动对象在窗口内的任何地方移动。

官方示例地址:http://jqueryui.com/demos/draggable/所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper-表示被拖拽的元素的JQuery对象 ui.position-表示相对当前对象,鼠标的坐标值对象{top,left} ui.offset-表示相对于当前页面,鼠标的坐标值对象{top,left} ·参数(参数名:参数类型:默认值) addClasses:Boolean:true如果设置成false,将在加载时阻止ui-draggable样式的加载。

当有很多对象要加载draggable()插件的情况下,这将对性能有极大的优化。

初始:$('.selector').draggable({addClasses:false}); 获取:varaddClasses=$('.selector').draggable('option','addClasses'); 设置:$('.selector').draggable('option','addClasses',false); appendTo:Element,Selector:'parent'TheelementpassedtoorselectedbytheappendTooptionwillbeusedasthedraggablehelper'scontainerduringdragging.Bydefault,thehelperisappendedtothesamecontainerasthedraggable. 初始:$('.selector').draggable({appendTo:'body'}); 获取:varappendTo=$('.selector').draggable('option','appendTo'); 设置:$('.selector').draggable('option','appendTo','body'); axis:String:false约束拖动的动作只能在X轴或Y轴上执行,可选值:'x','y'。

初始:$('.selector').draggable({axis:'x'}); 获取:varaxis=$('.selector').draggable('option','axis'); 设置:$('.selector').draggable('option','axis','x'); cancel:Selector:':input,option'防止在指定的对象上开始拖动。

初始:$('.selector').draggable({cancel:'button'}); 获取:varcancel=$('.selector').draggable('option','cancel'); 设置:$('.selector').draggable('option','cancel','button'); connectToSortable:Selector:false允许draggable被拖拽到指定的sortables中,如果使用此选项helper属性必须设置成clone才能正常工作。

初始:$('.selector').draggable({connectToSortable:'ul#myList'}); 获取:varconnectToSortable=$('.selector').draggable('option','connectToSortable'); 设置:$('.selector').draggable('option','connectToSortable','ul#myList'); containment:Selector,Element,String,Array:false 强制draggable只允许在指定元素或区域的范围内移动,可选值:'parent','document','window',[x1,y1,x2,y2]. 初始:$('.selector').draggable({containment:'parent'}); 获取:varcontainment=$('.selector').draggable('option','containment'); 设置:$('.selector').draggable('option','containment','parent'); cursor:String:'auto'指定在做拖拽动作时,鼠标的CSS样式。

初始:$('.selector').draggable({cursor:'crosshair'}); 获取:varcursor=$('.selector').draggable('option','cursor'); 设置:$('.selector').draggable('option','cursor','crosshair'); cursorAt:Object:false当开始移动时,鼠标定位在的某个位置上(最多两个方向)。

可选值:{top,left,right,bottom}. 初始:$('.selector').draggable({cursorAt:{left:5}}); 获取:varcursorAt=$('.selector').draggable('option','cursorAt'); 设置:$('.selector').draggable('option','cursorAt',{left:5}); delay:Integer:0 当鼠标点下后,延迟指定时间后才开始激活拖拽动作(单位:毫秒)。

此选项可以用来防止不想要的拖累元素时的误点击。

初始:$('.selector').draggable({delay:500}); 获取:vardelay=$('.selector').draggable('option','delay'); 设置:$('.selector').draggable('option','delay',500); distance:Integer:1 当鼠标点下后,只有移动指定像素后才开始激活拖拽动作。

初始:$('.selector').draggable({distance:30}); 获取:vardistance=$('.selector').draggable('option','distance'); 设置:$('.selector').draggable('option','distance',30); grid:Array:false 拖拽元素时,只能以指定大小的方格进行拖动。

可选值:[x,y] 初始:$('.selector').draggable({grid:[50,20]}); 获取:vargrid=$('.selector').draggable('option','grid'); 设置:$('.selector').draggable('option','grid',[50,20]); handle:Element,Selector:false 限制只能在拖拽元素内的指定元素开始拖拽。

初始:$('.selector').draggable({handle:'h2'}); 获取:varhandle=$('.selector').draggable('option','handle'); 设置:$('.selector').draggable('option','handle','h2'); helper:String,Function:'original'拖拽元素时的显示方式。

(如果是函数,必须返回值是一个DOM元素)可选值:'original','clone',Function 初始:$('.selector').draggable({helper:'clone'}); 获取:varhelper=$('.selector').draggable('option','helper'); 设置:$('.selector').draggable('option','helper','clone'); iframeFix:Boolean,Selector:false可防止当mouseover事件触发拖拽动作时,移动过iframes并捕获到它(内部内容),如果设置成true,则屏蔽层会覆盖页面的iframe。

如果设置成对应的选择器,则屏蔽层会覆盖相匹配的iframe。

初始:$('.selector').draggable({iframeFix:true}); 获取:variframeFix=$('.selector').draggable('option','iframeFix'); 设置:$('.selector').draggable('option','iframeFix',true); opacity:Float:false当元素开始拖拽时,改变元素的透明度。

初始:$('.selector').draggable({opacity:0.35}); 获取:varopacity=$('.selector').draggable('option','opacity'); 设置:$('.selector').draggable('option','opacity',0.35); refreshPositions:Boolean:false如果设置成true,所有移动过程中的坐标都会被记录。

(注意:此功能将影响性能) 初始:$('.selector').draggable({refreshPositions:true}); 获取:varrefreshPositions=$('.selector').draggable('option','refreshPositions'); 设置:$('.selector').draggable('option','refreshPositions',true); revert:Boolean,String:false当元素拖拽结束后,元素回到原来的位置。

初始:$('.selector').draggable({revert:true}); 获取:varrevert=$('.selector').draggable('option','revert'); 设置:$('.selector').draggable('option','revert',true); revertDuration:Integer:500 当元素拖拽结束后,元素回到原来的位置的时间。

(单位:毫秒) 初始:$('.selector').draggable({revertDuration:1000}); 获取:varrevertDuration=$('.selector').draggable('option','revertDuration'); 设置:$('.selector').draggable('option','revertDuration',1000); scope:String:'default'设置元素只允许拖拽到具有相同scope值的元素。

初始:$('.selector').draggable({scope:'tasks'}); 获取:varscope=$('.selector').draggable('option','scope'); 设置:$('.selector').draggable('option','scope','tasks'); scroll:Boolean:true如果设置为true,元素拖拽至边缘时,父容器将自动滚动。

初始:$('.selector').draggable({scroll:false}); 获取:varscroll=$('.selector').draggable('option','scroll'); 设置:$('.selector').draggable('option','scroll',false); scrollSensitivity:Integer:20 当元素拖拽至边缘时,父窗口一次滚动的像素。

初始:$('.selector').draggable({scrollSensitivity:40}); 获取:varscrollSensitivity=$('.selector').draggable('option','scrollSensitivity'); 设置:$('.selector').draggable('option','scrollSensitivity',40); scrollSpeed:Integer:20 当元素拖拽至边缘时,父窗口滚动的速度。

初始:$('.selector').draggable({scrollSpeed:40}); 获取:varscrollSpeed=$('.selector').draggable('option','scrollSpeed'); 设置:$('.selector').draggable('option','scrollSpeed',40); snap:Boolean,Selector:false当设置为true或元素标签时,元素拖动到其它元素的边缘时,会自动吸附其它元素。

初始:$('.selector').draggable({snap:'span'}); 获取:varsnap=$('.selector').draggable('option','snap'); 设置:$('.selector').draggable('option','snap','span'); snapMode:String:'both'确定拖拽的元素吸附的模式。

可选值:'inner','outer','both'初始:$('.selector').draggable({snapMode:'outer'}); 获取:varsnapMode=$('.selector').draggable('option','snapMode'); 设置:$('.selector').draggable('option','snapMode','outer'); snapTolerance:Integer:20 确定拖拽的元素移动至其它元素多少像素的距离时,发生吸附的动作。

初始:$('.selector').draggable({snapTolerance:40}); 获取:varsnapTolerance=$('.selector').draggable('option','snapTolerance'); 设置:$('.selector').draggable('option','snapTolerance',40); stack:Object:falseControlsthez-Indexofthedefinedgroup(key'group'inthehash,acceptsjQueryselector)automatically,alwaysbringstofrontthedraggeditem.Veryusefulinthingslikewindowmanagers.Optionally,a'min'keycanbeset,sothezIndexcannotgobelowthatvalue. 初始:$('.selector').draggable({stack:{group:'products',min:50}}); 获取:varstack=$('.selector').draggable('option','stack'); 设置:$('.selector').draggable('option','stack',{group:'products',min:50}); zIndex:Integer:false控制当拖拽元素时,改变元素的z-index值。

初始:$('.selector').draggable({zIndex:2700}); 获取:varzIndex=$('.selector').draggable('option','zIndex'); 设置:$('.selector').draggable('option','zIndex',2700); ·事件 start 当鼠标开始拖拽时,触发此事件。

初始:$('.selector').draggable({start:function(event,ui){...}}); 绑定:$('.selector').bind('dragstart',function(event,ui){...}); drag 当鼠标拖拽移动时,触发此事件。

初始:$('.selector').draggable({drag:function(event,ui){...}}); 绑定:$('.selector').bind('drag',function(event,ui){...}); stop 当鼠标松开时,触发此事件。

初始:$('.selector').draggable({stop:function(event,ui){...}}); 绑定:$('.selector').bind('dragstop',function(event,ui){...}); ·方法 destory 从元素中移除拖拽功能。

用法:.draggable('destroy') disable 禁用元素的拖拽功能。

用法:.draggable('disable') enable 启用元素的拖拽功能。

用法:.draggable('enable')option 获取或设置元素的参数。

用法:.draggable('option',optionName,[value]) JQueryUI-draggable,参数,中文,详细,说明

javascript数组元素的添加、删除与插入以及参数数组的使用

1、数组元素的添加 push方法在数组的尾部添加元素: var colorArray=new Array(); colorArray.push(‘red‘,‘black‘,‘yellow‘); //这里是直接压入三个元素 //当然也可以这要写 colorArray.push(‘red‘); colorArray.push(‘black‘);2、数组元素的删除与插入 pop方法删除数组的最后一个元素: var colorArray=new Array();colorArray.push(‘red‘,‘black‘,‘yellow‘); colorArray.pop();//这里是删除数组的最后一个元素 var item=colorArray.pop();//当然这个方法在删除的同时也可以返回数组的最后一个元素删除数组元素的第二种方法是用splice()splice()可以删除任意数量的项,只需传入两个参数:要删除的第一项的位置和要删除的项数,例如,splice (0,2),删除数组中前两项。

当然splice(2,2)就是删除下标为2的数组元素。

splice()这个方法还可以实现数组的插入操作: splice(2,0,‘xiaochun‘)这里传入三个参数,第一个参数是要插入的位置,第二个参数表示要删除多少个元素(这里给个0,表示不用删除),第三个参数表示要插入的数据。

运行结果是在下标2处插入xiaochun以上的实例也可进行替换操作: splice(2,1,‘xiaochun‘)表示在下标为2处删除1个元素再插入xiaochun,这样就等同于替换了。

3、参数数组的使用 在Javascript中function的参数其实也是一个数组:function test(){ //注意这里我没有给出函数的参数 alert(arguments[0]+" , "+arguments[1]+" , "+arguments[2]); for(var i=0;i 下一篇:

worrydolls解忧娃娃如何设置中文

今天小编要给大家来将的就是worrydolls解娃娃怎么设置中文,有需要了解的伙伴们跟着小编一起来看看吧。

worrydolls解忧娃娃怎么设置中文 worrydolls调成中文版操作方法这款软件是自带中文的,所以不用担心看不懂。

在这里有很多全新的话题可以选择搭配,各种压力需要你来承受,在这大家可以通过倾诉来解决所有的麻烦和危机舒缓你心中的压力,静静的倾听给你真实的感受。

大家需要通过倾诉发泄你心中的不安和不满,使用各种电子和方式解决你的麻烦,各种趣味的疗法可以轻松的搭配和选择,通过不断地分享和吐槽解决你心中的压力和不满,这各种娃娃都是可以选择的,各种趣味的方式诉说小心翼翼的聆听给你震撼的体验感受。

您可以选择各种类型的娃娃,告诉你所有的压力和玩偶,玩偶会安静地听,玩偶会记录您告诉您的所有麻烦和秘密,并成为当您回来聆听时,您深受感动。

绝对私有,100%安全,永远免费且无广告,不用担心你的秘密被别人发现。

以上就是给大家分享的全部攻略,更多精彩教程可以关注ZI7下载站哦!

加入收藏
               

JQueryUI-draggable参数中文详细说明

点击下载文档

格式为doc格式

  • 账号登录
社交账号登录