jQuery UI-Draggable 参数集合


Posted in Javascript onJanuary 10, 2010

Draggable
库文件:ui/ui.core.js、ui/ui.draggable.js
============================================================
Default:
$(”#draggable”).draggable();
============================================================
constrain-movement(限制范围移动):
$(”#draggable”).draggable({ axis: ‘y' }); //限制y轴
$(”#draggable2″).draggable({ axis: ‘x' }); //限制x轴
$(”#draggable3″).draggable({ containment: ‘#containment-wrapper', scroll: false }); //不出现滚动条
$(”#draggable4″).draggable({ containment: ‘#demo-frame' });
$(”#draggable5″).draggable({ containment: ‘parent' }); //限制在父系框架中
============================================================
delay-start(延时移动):
$(”#draggable”).draggable({ distance: 20 }); //移动20像素开始拖动
$(”#draggable2″).draggable({ delay: 1000 });//延迟1秒后开始拖动
============================================================
snap-to (吸附移动):
$(”#draggable”).draggable({ snap: true }); //默认,任何方式吸附
$(”#draggable2″).draggable({ snap: ‘.ui-widget-header' }); //以某元素的内外径吸附
$(”#draggable3″).draggable({ snap: ‘.ui-widget-header', snapMode: ‘outer' }); //以某元素外径吸附,吸附方式:本上吸其下,本下吸其上. 内径吸附:inner, 吸附方式:相反
$(”#draggable4″).draggable({ grid: [20,20] });//以一定距离移动
$(”#draggable5″).draggable({ grid: [80, 80] });
============================================================
scroll:
$(”#draggable”).draggable({ scroll: true });
$(”#draggable2″).draggable({ scroll: true, scrollSensitivity: 100 }); //滚动条敏感度
$(”#draggable3″).draggable({ scroll: true, scrollSpeed: 100 }); //滚动速度
============================================================
revert position(恢复到原始位置):
$(”#draggable”).draggable({ revert: true }); //revert:true 设置为恢复到位置
$(”#draggable2″).draggable({ revert: true, helper: ‘clone' }); //helper:'clone' 复制拖动
============================================================
visualfeedback (视觉效果):
$(”#draggable”).draggable({ helper: ‘original' }); //设置不复制(初始化设置)
$(”#draggable2″).draggable({ opacity: 0.7, helper: ‘clone' }); //opacity设置透明度,并克隆元素
$(”#draggable3″).draggable({
cursor: ‘move', //设置鼠标图形
cursorAt: { top: -12, left: -20 }, //位置定位坐标设置
helper: function(event) {
return $('
I\'m a custom helper
');
} //新建提示元素,上面设置其以鼠标定位位置值
});
$(”#set div”).draggable({ stack: { group: ‘#set div', min: -1 } });//群组设置拖动,并且最后添加的元素叠加到该群组的最上面.适合做许愿板效果。
============================================================
Drag handle (拖动点设置):
$(”#draggable”).draggable({ handle: ‘p' }); //handle设置实现拖动位置
$(”#draggable2″).draggable({ cancel: “p.ui-widget-header” }); //cancel设置限制拖动位置
============================================================
Cursor style (鼠标样式):
$(”#draggable”).draggable({ cursorAt: { cursor: ‘move', top: 56, left: 56 } }); //cursor设置鼠标样式, top、left、right、bottom设置元素相对鼠标的定位点
$(”#draggable2″).draggable({ cursorAt: { cursor: ‘crosshair', top: -5, left: -5 } });
$(”#draggable3″).draggable({ cursorAt: { bottom: 0 } });
===========================================================
Cursor style (鼠标样式):
$(”#draggable”).draggable({ cursorAt: { cursor: ‘move', top: 56, left: 56 } }); //cursor设置鼠标样式, top、left、right、bottom设置元素相对鼠标的定位点
============================================================
Draggable+sortable:
$(”#sortable”).sortable({
revert: true
});
$(”#draggable”).draggable({
connectToSortable: ‘#sortable', //设置拖动加入到其他列表中
helper: ‘clone',
revert: ‘invalid'
});

Javascript 相关文章推荐
对YUI扩展的Gird组件 Part-2
Mar 10 Javascript
js replace正则表达式应用案例讲解
Jan 17 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 Javascript
javascript中Array()数组函数详解
Aug 23 Javascript
下雪了 javascript实现雪花飞舞
Aug 02 Javascript
javascript用正则表达式过滤空格的实现代码
Jun 14 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
Vue项目实现简单的权限控制管理功能
Jul 17 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 Javascript
vue.js实现简单购物车功能
May 30 Javascript
将CKfinder整合进CKEditor3.0的新方法
Jan 10 #Javascript
js或css文件后面跟参数的原因说明
Jan 09 #Javascript
Javascript的构造函数和constructor属性
Jan 09 #Javascript
jQuery 页面 Mask实现代码
Jan 09 #Javascript
JQuery 遮罩层实现(mask)实现代码
Jan 09 #Javascript
Javascript UrlDecode函数代码
Jan 09 #Javascript
JavaScript 页面坐标相关知识整理
Jan 09 #Javascript
You might like
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
PHP函数实现分页含文本分页和数字分页
2014/10/23 PHP
理解PHP中的Session及对Session有效期的控制
2016/01/08 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
jquery入门—访问DOM对象方法
2013/01/07 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
JS实现深度优先搜索求解两点间最短路径
2019/01/17 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
Python3生成手写体数字方法
2018/01/30 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
Django配置文件代码说明
2019/12/04 Python
python爬虫请求头设置代码
2020/07/28 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
继承公证书
2014/04/09 职场文书
授权委托书协议书
2014/10/16 职场文书
西湖英语导游词
2015/02/06 职场文书
信用卡收入证明范本
2015/06/12 职场文书
网络舆情信息简报
2015/07/21 职场文书
新闻通讯稿范文
2015/07/22 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS