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 相关文章推荐
JavaScript中void(0)的具体含义解释
Feb 27 Javascript
JavaScript.Encode手动解码技巧
Jul 14 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 Javascript
Javascript监视变量变化的方法
Jun 09 Javascript
JavaScript闭包和回调详解
Aug 09 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
vue-cli监听组件加载完成的方法
Sep 07 Javascript
Vue组件系列开发之模态框
Apr 18 Javascript
Vue搭建后台系统需要注意的问题
Nov 08 Javascript
解决vue中的无限循环问题
Jul 27 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 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
15种PHP Encoder的比较
2007/03/06 PHP
PHP 日常开发小技巧
2009/09/23 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
vue-cli webpack2项目打包优化分享
2018/02/07 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
es6数值的扩展方法
2019/03/11 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
python实现端口转发器的方法
2015/03/13 Python
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
Python只用40行代码编写的计算器实例
2017/05/10 Python
Python时间的精准正则匹配方法分析
2017/08/17 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
Django学习笔记之为Model添加Action
2019/04/30 Python
python实现图片上添加图片
2019/11/26 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
移动端HTML5实现文件上传功能【附代码】
2016/03/25 HTML / CSS
程序员跳槽必看面试题总结
2013/06/28 面试题
自我鉴定200字
2013/10/28 职场文书
群众路线党课主持词
2014/04/01 职场文书
开展批评与自我批评心得体会
2014/10/17 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
四年级数学教学反思
2016/02/16 职场文书
Python OpenCV 图像平移的实现示例
2021/06/04 Python