`

jquery draggable 方法的参数

 
阅读更多

draggable方法有很多参数,今天我瞎摸弄明白了一下几个:

 

 

 

addclasses:
如果设置成false,将不添加ui-draggable这个class.当调用 .draggable() 初始化上百个元素时,可以优化性能(【王子很坏】提供翻译)

 

appendto :
进行拖拽时,被传递或被appendto选项选择的元素将被当做draggable helper的容器,默认情况下,helper被追加到那个draggable元素相同的容器中((【王子很坏】提供翻译 , 这个属性我测试没成功。研究中)

 

axis:
拖拽动作只在 对应的轴向上移动。 参数x 或 y

cancel :
当拖拽对象是cancel说设置的标签或者对象时候,拖拽无效

containment:
限制拖拽对象在参数设置区域,参数可以为 标签 对象 或者 是[x1,y2,x2,y2]的像素区域

cursor:
设置 拖拽动作鼠标样式

cursorat:
设置拖拽动作发生鼠标所在位置 参数为 { cursorat: { left: 5 } } 广州javascript培训

delay:
拖拽动作延迟多少毫秒后响应 参数 毫秒

distance:
拖拽动作离开拖拽对象 一定像素以后 拖拽发生 参数数值

 

grid :
拖拽动作发生后 造成 对其网格效果, 其效果是每次移动 固定像素距离,参数为 [20, 20]

 

handle:
设置拖拽对象里面可实现拖拽动作的对象。参数是选择器 类似于浏览器一样,只能通过顶部蓝色条拖拽,但是拖动的是整个浏览器。

 

helper :
拖拽动作发生时 原始对象不动,复制一个对象给拖拽事件 对象在拖拽结束后是否保存在结束位置取决于参数   'original', 'clone', function. 参数为function的时候不许返回一个 dom标签。

 

iframefix :
防止应为iframes 的存在导致拖拽在中途丢失

 

opacity :
设置拖拽时的透明度 参数浮点型  1.00-0.00 拖拽结束后 透明度回复初始状态

 

scroll :
设置拖动对象被拖动时,是否允许拖出前容器(浏览器)显示区域(也就是说触不发auto-scrolls *关于auto-scrolls请看后面的解释*)。设置为false ,拖动对象碰到边框的时候容器窗口不会随着碰撞移动主体窗口。 注意,这个经过我测试,设置为false 一样会产生滚动条。

 

scrollsensitivity :
设置拖拽对象被拖拽时与容器发生碰撞的响应距离。貌似这样解释不好理解,通俗的说,就是当你碰到边框的多少像素范围内就发生auto-scrolls事件。

 

scrollspeed:
当拖拽对象和浏览器边发生碰撞时,容器每次移动主体窗口的距离。

revert :
设置拖拽事件执行完毕后拖拽是否生效,如果不生效那么将以动画方式返回到拖拽对象初始化位置。参数为逻辑值或者字符串'valid', 'invalid';


 

revertduration :
在revert事件执行时候,设置以动画返回初始化位置的速度。参数为 数值毫秒。在没有设置revert的情况下 改属性没意义。 51hsycn

snap:
拖拽对象设置该属性以后,在2个拖拽对象即将发生接触时,拖拽对象会自动吸附到相互的边上。类似于磁铁效果或者ps教程里面的对齐参考。参数为逻辑值, 只有2个或者2个以上对象设置了该属性才能相互发生作用。 火烧云

snapmode :
拖拽对象相互之间的吸附模式。参数为'inner', 'outer', 'both'。 默认值是both。

snaptolerance:
拖拽对象相互之间发生吸附模式的作用范围,可以理解为 磁铁的磁力, 参数为 像素单位。

stack :
当你有多个拖拽对象的时候,你可以使用此参数把他们设置为一个组,然后在这个参数里面有可以定义最小z轴,这些拖拽对象,将不再按照原始z轴层叠,而是按照最后点击循序来层叠。类似于windows多个文件夹窗口一样的层叠。 参数方式{ stack: { group: 'div', min: 50 }}。

zindex 拖动事件触发时候 z轴改成对应参数,拖拽结束,z轴还原。

 

注:【aoto-scroll  是自动滚动,也就是说 拖拽对象在碰撞到边框的时候,容器(浏览器)滚动条会自动延伸滚动条 并且屏幕像碰撞方向偏移~】

 

 事件:

 

拖拽有3个事件,和4个参数 详情可以直接看官方aip那些不用详细说明。 h

分享到:
评论

相关推荐

    jQuery UI-Draggable 参数集合

    jQuery UI-Draggable常用参数集合。

    jQuery-Draggable-Touch:DraggableDroppable jQuery UI 翻版,适用于手机和平板电脑

    jQuery-Draggable-Touch 可拖放/可拖放的翻版,适用于移动设备和平板电脑。 使用 translateX/Y 而不是 top/left。 使用作为转换参数。 添加功能 多点触控:可以同时拖动多个对象!bug $('.draggable').draggable...

    JQuery UI/API/1.7 中文帮助文档

    jQuery UI Draggable 概述 jQuery UI Draggable 插件可以使被选择的元素随着鼠标移动实现拖动. 可拖动的元素得到一个ui-draggable类. 拖动中的元素始终得到ui-draggable-dragging类. 假如你不仅仅只想要拖动,而是想...

    jquery.ui.draggable中文文档(原文翻译)

    [原文翻译]JQuery UI Draggable插件...所有的回调函数(start, stop, drag等事件)接受两个参数: event: 浏览器原生的事件ui: 一个JQuery的ui对象, 其中有以下主要属性 ui.helper: 正在拖动的元素的JQuery包装对象, u

    jquery-easyui-EDT-1.5.5.7z

    menu:'findItem'方法允许用户通过任意参数查找菜单项; menubutton:添加'showEvent'和'hideEvent'属性。 New Plugin(新组件) maskedbox:'maskedbox'组件将会强制用户输入的内容。 jQuery EasyUI 1.5.4 版本...

    jquery-ui.draggable.hold-to-drag:允许将对象从启用触摸的设备上的可滚动容器中拖出

    jquery-ui.draggable.touch-scroll-patch 进行简单的调整即可将对象从启用触摸的设备上从可滚动容器中拖出。 使用可拖动的延迟和距离参数调整功能。 如果直到延迟超时鼠标仍未移开距离,则开始拖动。 否则,事件将...

    PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解

    想拖动页面上的层,完全可以用jQuery ui的Draggable方法来实现,那如何将拖动后层的位置保存下来呢?本文将给出答案。本文讲解了如何采用PHP+MySQL+jQuery,实现随意拖动层并即时保存拖动位置。 本文原理就是通过...

    jQuery UI Dialog 创建友好的弹出对话框实现代码

    主要参数 jQuery UI Dialog常用的参数有: 1、autoOpen:默认true,即dialog方法创建就显示对话框 2、buttons:默认无,用于设置显示的按钮,可以是JSON和Array形式: {“确定”:function(){},”取消”:function(){}}...

    PHP+jQuery实现随意拖动层并即时保存拖动位置

    想拖动页面上的层,完全可以用jQuery ui的Draggable方法来实现,那如何将拖动后层的位置保存下来呢?本文将给出答案。本文讲解了如何采用PHP+MySQL+jQuery,实现随意拖动层并即时保存拖动位置。 之前我有文章:,...

    jquery 图片截取工具jquery.imagecropper.js

    除了jquery,本插件还引用了UI库,包括ui.draggable.js ImageCropper 演示需要asp.net支持。测试通过 ImageCropper 下载 //www.jb51.net/jiaoben/25688.html插件用法: 代码如下:var imageCropper = $(‘#...

    HiFrame:JS实现的高度优秀Frame!

    Draggable-frame是一款以JS+Jquery编写的可拖拽式多功能的“截屏框”,提供一下功能: 可拖拽-Movable:具有边界性,通过绑定父元素实现限制框的移动; 可伸缩-Resizable:放大缩小可以在框的四个角中实现; 可插件...

Global site tag (gtag.js) - Google Analytics