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 判断checkbox是否选中的实现代码
Nov 23 Javascript
JavaScript 变量作用域分析
Jul 04 Javascript
15个款优秀的 jQuery 图片特效插件推荐
Nov 21 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
AngularJs实现ng1.3+表单验证
Dec 10 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 Javascript
AngularJS Controller作用域
Jan 09 Javascript
浅谈js中的变量名和函数名重名
Feb 13 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 Javascript
基于Vuejs和Element的注册插件的编写方法
Jul 03 Javascript
JavaScript函数柯里化实现原理及过程
Dec 02 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
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
yii操作session实例简介
2014/07/31 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
2019/08/27 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
python中stdout输出不缓存的设置方法
2014/05/29 Python
python实现textrank关键词提取
2018/06/22 Python
Python实现多线程的两种方式分析
2018/08/29 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
大学生入党思想汇报
2014/01/14 职场文书
高校优秀辅导员事迹材料
2014/05/07 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
听证通知书
2015/04/24 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
python的变量和简单数字类型详解
2021/09/15 Python
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript
利用Redis实现点赞功能的示例代码
2022/06/28 Redis