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 相关文章推荐
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
vue2中filter()的实现代码
Jul 09 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 Javascript
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 Javascript
JS数组转字符串实现方法解析
Sep 04 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 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里面的抽象类
2010/01/28 PHP
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
一个完整的PHP类包含的七种语法说明
2015/06/04 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
jquery实现从数组移除指定的值
2015/06/24 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
第一次接触神奇的Bootstrap网格系统
2016/07/27 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
微信小程序之MaterialDesign--input组件详解
2017/02/15 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
Python实现单词翻译功能
2017/06/06 Python
Pandas 数据处理,数据清洗详解
2018/07/10 Python
python tkinter组件使用详解
2019/09/16 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
用python制作个音乐下载器
2021/01/30 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
大门门卫岗位职责
2013/11/30 职场文书
师范类求职信
2014/06/21 职场文书
社团活动总结模板
2014/06/30 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
2015年中秋寄语
2015/07/31 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL
台式电脑蓝牙适配器怎么安装?台式电脑蓝牙适配器安装教程
2022/04/08 数码科技