( ! ) Warning: include(): http:// wrapper is disabled in the server configuration by allow_url_include=0 in D:\www\up\jQuery\jqueryui_01.php on line 25
Call Stack
#TimeMemoryFunctionLocation
10.0000365920{main}( )...\jqueryui_01.php:0

( ! ) Warning: include(http://pub.houheaven.com/Nav02/Nav_deep2.htm): failed to open stream: no suitable wrapper could be found in D:\www\up\jQuery\jqueryui_01.php on line 25
Call Stack
#TimeMemoryFunctionLocation
10.0000365920{main}( )...\jqueryui_01.php:0

( ! ) Warning: include(): Failed opening 'http://pub.houheaven.com/Nav02/Nav_deep2.htm' for inclusion (include_path='.;C:\php\pear') in D:\www\up\jQuery\jqueryui_01.php on line 25
Call Stack
#TimeMemoryFunctionLocation
10.0000365920{main}( )...\jqueryui_01.php:0

$(content).draggable('option');

option:

( 1 ) destroy:删除拖动方法。

( 2 ) disable:拖动方法失效。

( 3 ) enable:拖动方法生效。

( 4 ) option:参数,参数形式指定值 或 property 形式。

参数值形式:draggable ( 'option' , optionName , [value] );

property   :draggable ({optionName:value , optionName:value});

取值初始值功能说明代码形式补充
addClassestrue性能调节.draggable({addClasses:false})
.draggable({'option','addClasses',false})
为 false,不调用jQueryUI提供的CSS的ui-draggable类
appendToparent拖动到的位置.draggable({appendTo:'body'})
.draggable({'option','appendTo','body'})
未指定时,追加到与拖动元素相同的容器中。
axisfalse限制拖动方向为水平(x)或垂直(y).draggable({axis:'x'})
.draggable({'option','axis','x'})
cancel 限制指定元素拖动.draggable({cancel:'div'})
.draggable({'option','cancel','div'})
connectToSortablefalse使sortable方法中的拖动生效.draggable({connectToSortable:'url'})
.draggable({'option','connectToSortable':'url'})
若要生效,将helper设置为clone
helperoriginal .draggable({helper:'clone'})
.draggable({'option','helper','clone'})
clone指元素复制后在拖动中显示,original指与光标重叠的方法拖动。
containmentfalse限制拖动范围.draggable({containment:'parent'})
.draggable({'option','containment','parent'})
'parent、document、window、x1,y1,x2,y2'
cursorauto指定鼠标光标.draggable({cursor:'move'})
.draggable({'option','cursor','move'})
cursorAtfalse在拖动时光标的位置.draggable({cursorAt:{left:5}})
.draggable({'option','cursorAt','{left:5}'})
{top:n,left:n,right:n,bottom:n}
delay0拖动延迟,单位毫秒.draggable({delay:500})
.draggable({'option','delay',500})
distance1拖动需要的最短距离,单位px.draggable({distance:20})
.draggable({'option','distance',20})
元素被拖动超过了指定距离,才会移动
gridfalse以指定网格(x,y)坐标的方式移动.draggable({grid:[50,20]})
.draggable({'option','grid',[50,20]})
handlefalse在指定元素中可以拖动排序元素.draggable({handle:'p'})
.draggable({'option','handle','p'})
iframeFixfalse防止mouseover事件的动作.draggable({iframeFix:true})
.draggable({'option','iframeFix',true})
在iframe上,拖动其他元素时,要防止mouseover事件动作
opacityfalse元素拖动时的不透明度.draggable({opacity:0.5})
.draggable({'option','opacity',0.5})
refreshPositionsfalse计算鼠标拖动时的拖动坐标.draggable({refreshPositions:true})
.draggable({'option','refreshPositions',true})
耗费资源的精细动作,会使性能变差
revertfalse返回拖动元素的原位置.draggable({revert:true})
.draggable({'option','revert',true})
拖动结束后,返回到原来的位置,true、false、valid、invalid
revertDuration500拖动结束时动画时间,单位毫秒.draggable({revertDuration:1000})
.draggable({'option','revertDuration',1000})
拖动结束后,返回到原来的位置,以微妙为单位指定动画结束时间
scopedefault将拖动元素细致分组.draggable({scope:'tasks'})
.draggable({'option','scope','tasks'})
对于drop功能的accept被设定的元素,在需要进一步分组时使用
scrolltrue设置自动滚动条.draggable({scroll:true})
.draggable({'option','scroll',true})
是否有滚动条
scrollSensitivity20一像素为单位指定鼠标箭头与显示领域间的距离.draggable({scrollSensitivity:40})
.draggable({'option','scrollSensitivity',40})
scrollSpeed20滚动的速率.draggable({scrollSpeed:40})
.draggable({'option','scrollSpeed',40})
在scrollSensitivity中指定的值中指定页面滚动时加入鼠标箭头距离后的速率
snapfalse向指定元素附近移动时是否吸附.draggable({snap:true})
.draggable({'option','snap',true})
snapModeboth吸附位置.draggable({snapMode:'outer'})
.draggable({'option','snapMode','outer'})
inner、outer、both
snapTolerance20最小的吸附动画效果距离.draggable({snapTolerance:40})
.draggable({'option','snapTolerance',40})
stackfalse拖动分组的拖动元素时,是当前元素始终处于最前面.draggable({stack:{group:'products',min:50}})
.draggable({'option','stack',{group:'products',min:50})
元素不会在比min中指定的层级更下方显示
zindexfalse指定拖动元素的重叠顺序.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属性。

事件选项:

选项名值类型事件名功能说明代码形式
startfunctiondragstart指定拖动开始时的事件内容.draggable({start:function(event,ui){…}})
.bind('dragstart',function(event,ui){…})
dragfunctiondrag指定拖动过程中的事件内容.draggable({drag:function(event,ui){…}})
.bind('drag',function(event,ui){…})
stopfunctiondragstop指定拖动结束时的事件内容.draggable({stop:function(event,ui){…}})
.bind('dragstop',function(event,ui){…})
显示框架
显示框架
显示框架
显示框架