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 相关文章推荐
js同时按下两个方向键
Dec 01 Javascript
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 Javascript
js实现符合国情的日期插件详解
Jan 19 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
vue.js实现的绑定class操作示例
Jul 06 Javascript
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
May 09 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 开发工具
2006/12/06 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
js常见表单应用技巧
2008/01/09 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
2018/07/08 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
[03:59]DOTA2英雄梦之声_第07期_水晶室女
2014/06/23 DOTA
python中文乱码的解决方法
2013/11/04 Python
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
Python实现的桶排序算法示例
2017/11/29 Python
Python中staticmethod和classmethod的作用与区别
2018/10/11 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
python中p-value的实现方式
2019/12/16 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
一文解决django 2.2与mysql兼容性问题
2020/07/15 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
会计电算化个人自我评价
2013/11/17 职场文书
高一家长会邀请函
2014/01/12 职场文书
宣传工作经验材料
2014/06/02 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
党性分析材料格式
2014/12/19 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
女人创业励志语录,句句蕴含能量,激发你的潜能
2019/08/20 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
Python四款GUI图形界面库介绍
2022/06/05 Python