`

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 draggable总结

    JQuery UI Draggable 插件是jQuery UI库中用于实现元素拖动功能的重要组件。它允许用户通过鼠标拖曳选定的HTML元素,从而增加交互性和动态性。在使用Draggable插件时,需要理解以下几个核心知识点: 1. **基本用法*...

    Jquery UI Draggable中文API及使用

    本文将详细介绍 Jquery UI Draggable 的基本用法、配置参数、事件处理及常见应用场景。 #### 基本使用 Draggable 插件使得被选择的元素可以随着鼠标的移动而实现拖拽功能。下面通过几个简单的例子来展示如何使用 ...

    jQuery UI-Draggable 参数集合

    ### jQuery UI-Draggable 参数详解 #### 一、概述 jQuery UI 是一套基于 jQuery 的用户界面组件库,它提供了一系列的交互式控件,其中包括 Drag & Drop 功能。Draggable 组件是其中的一个核心功能,它允许用户拖动...

    jquery.ui.draggable中文文档

    `<overview>`部分提供了Draggable的基本介绍和使用方法,`<options>`部分则详述了插件的各种配置选项。 Draggable元素在拖动过程中会添加CSS类`ui-draggable`和`ui-draggable-dragging`,用于在视觉上标识可拖动...

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

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

    Jquery IU Draggable随着鼠标移动实现拖动.zip

    2. **选项参数**: `draggable()`方法接受多个参数,以自定义拖动行为。例如,你可以设置`containment`选项,限制元素只能在某个容器内移动,或者设置`grid`选项,使元素移动时保持一定的间距。 ```javascript $("#...

    jquery.dialog插件参数说明

    ### jQuery Dialog插件参数详解 在前端开发领域,jQuery因其简单、灵活且强大的特性而备受开发者青睐。其中,`jQuery.dialog`插件更是为创建弹出对话框提供了丰富的功能和高度的自定义选项,极大地提升了网页的交互...

    Jquey拖拽控件Draggable用法

    `draggable()`方法接受多个可选参数,用于自定义拖动行为。例如: - `containment`:限制元素的拖动范围,可以是`"parent"`、`"document"`、`"window"`或者一个CSS选择器或元素对象。 - `cursor`:指定拖动时的鼠标...

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

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

    3.[jQuery.EasyUI]第3章.Draggable(拖动)组件

    2. **选项参数**:`.draggable()`方法接受一个可选的配置对象,用于自定义组件的行为。例如,你可以设置`cursor`来改变鼠标拖动时的光标样式,设置`revert`来决定拖动后元素是否返回原位置,或者设置`grid`来使元素...

    jquery文档JQuery API手册与JQuery UI API手册_1.2.rar

    “jQuery API手册”详细介绍了每个jQuery方法、参数、返回值以及示例代码,是开发者解决问题和查找功能的必备工具。同样,“jQuery UI API手册”则专注于jQuery UI组件的使用方法和配置选项,帮助开发者更好地利用...

    jQuery UI 英文文档(doc文件)

    jQuery UI Draggable 插件使元素变得可拖动。被拖动的元素会自动添加 `ui-draggable` 类,当元素正在被拖动时,还会添加 `ui-draggable-dragging` 类。如果你需要实现拖放功能,即不只是拖动,还可以放置到特定的...

    JQuery拖拽使用文档

    `drop` 事件会在拖动元素被放下到可放置区域时触发,`ui` 参数包含了拖动元素的相关信息,如 `ui.draggable` 可以获取到拖动的元素,`ui.draggable.text()` 获取元素的文本内容,`ui.draggable.attr("title")` 获取...

    全网jquery.tree树形菜单打包下载(zTree&jquery-ui&treeview共四种)

    这个压缩包包含四个不同的jQuery树形插件:zTree、jQuery UI Treeview、jQuery UI Draggable Tree和jQuery Simple Treeview。这些插件各有特色,适用于不同的项目需求。 首先,zTree是一款功能强大的jQuery插件,...

    jQuery可拖拽DIV页面

    开发者只需要在目标元素上应用`.draggable()`方法,然后设置一些可选参数,即可实现拖放功能。例如: ```javascript $('#myDiv').draggable({ containment: 'parent', // 只能在父元素内移动 cursor: 'move', //...

    jquery 拖拽

    在jQuery生态系统中,有两个主要的解决方案可以实现拖拽功能:jQuery UI和jQuery自身的`draggable()`方法。这里我们主要关注jQuery基础库中的`draggable()`方法,因为它是轻量级且易于上手的。 #### 1. `draggable...

    jqueryUi基础教程

    - `jquery.ui.draggable.js` **调用方法:** ```javascript $("#draggable").draggable(); ``` **参数说明:** - 无。 **事件:** - **dragstart**: 开始拖动时触发。 - **drag**: 拖动过程中触发。 - **...

    Jquery插件包 UI 拖拽

    `draggable()`方法接收可选的参数,如限制拖动范围、添加拖动时的视觉反馈等。 为了进一步增强拖放功能,可以结合使用jQuery UI的`droppable()`方法,实现拖放目标,这样就可以创建一个接受拖动元素的区域。这在...

    jquery8个很漂亮的特效

    jQuery UI库提供了draggable()和droppable()方法,支持元素的拖放操作,广泛应用于拖拽排序、组件布局等功能。 以上八个特效展示了jQuery在网页动态效果上的强大潜力。每个特效背后都涉及到jQuery的基本操作和事件...

Global site tag (gtag.js) - Google Analytics