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 input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
js 将json字符串转换为json对象的方法解析
Nov 13 Javascript
javascript闭包的理解
Apr 01 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
webpack学习教程之前端性能优化总结
Dec 05 Javascript
JS删除数组里的某个元素方法
Feb 03 Javascript
vue.js做一个简单的编辑菜谱功能
May 08 Javascript
Vue动态获取width的方法
Aug 22 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 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
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
PHP截取中文字符串的问题
2006/07/12 PHP
PHP URL路由类实例
2013/11/12 PHP
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
js form action动态修改方法
2008/11/04 Javascript
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
EasyUi datagrid 实现表格分页
2015/02/10 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
JS获得一个对象的所有属性和方法实例
2017/02/21 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
匡威德国官网:Converse德国
2019/01/26 全球购物
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
历史教育专业个人求职信
2013/12/13 职场文书
打造高效课堂实施方案
2014/03/22 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
优秀班组事迹材料
2014/12/24 职场文书
敬老院活动感想
2015/08/07 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书