jquery-draggable总结
约束拖动范围
通过定义 draggable 区域的边界来约束每个 draggable 的运动。
- 设置 axis 选项来限制 draggable 的路径为 x 轴或者 y 轴
$( "#draggable" ).draggable({ axis: "y" });
$( "#draggable1" ).draggable({ axis: "x" });
- 使用 containment 选项来指定一个父级的 DOM 元素或者一个 jQuery 选择器
$( "#draggable2" ).draggable({ containment: "#containment-wrapper", scroll: false });
$( "#draggable3" ).draggable({ containment: "parent" });
自动滚动
当 draggable 移动到视区外时自动滚动文档。设置 scroll 选项为 true 来启用自动滚动,当滚动触发时进行微调,滚动速度是通过 scrollSensitivity 和 scrollSpeed 选项设置的。
$( "#draggable" ).draggable({ scroll: true });
$( "#draggable2" ).draggable({ scroll: true, scrollSensitivity: 100 });
$( "#draggable3" ).draggable({ scroll: true, scrollSpeed: 100 });
光标定位
当拖拽对象时定位光标。默认情况下,光标是出现在被拖拽对象的中间。使用 cursorAt 选项来指定相对于 draggable 的另一个位置(指定一个相对于 top、right、bottom、left 的像素值)。
$( "#draggable" ).draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } });
$( "#draggable3" ).draggable({ cursorAt: { bottom: 0 } });
光标样式
通过提供一个带有有效的 CSS 光标值的 cursor 选项,来自定义光标的外观。有效的 CSS 光标值包括:default、move、pointer、crosshair,等等。
$( "#draggable" ).draggable({ cursor: "move" });
$( "#draggable2" ).draggable({ cursor: "crosshair" });
延迟开始
通过 delay 选项设置延迟开始拖拽的毫秒数。
$( "#draggable2" ).draggable({ delay: 1000 });
允许拖拽
通过 distance 选项设置光标被按下且拖拽指定像素后才允许拖拽。
$( "#draggable" ).draggable({ distance: 20 });
事件
- start:拖拽开始时触发
- drag:拖拽期间触发
- stop:拖拽停止时触发
Handles-指定元素(或元素组)触发拖拽
只有当光标在 draggable 上指定部分时才允许拖拽。使用 handle 选项来指定用于拖拽对象的元素(或元素组)的 jQuery 选择器。
$( "#draggable" ).draggable({ handle: "p" });
cancel-指定元素(或元素组)上时不允许拖拽
当光标在 draggable 内指定元素(或元素组)上时不允许拖拽。
$( "#draggable2" ).draggable({ cancel: "p.ui-widget-header" });
还原位置
当带有布尔值 revert 选项的 draggable 停止拖拽时,返回 draggable(或它的助手)到原始位置。
$( "#draggable" ).draggable({ revert: true });
$( "#draggable2" ).draggable({ revert: true, helper: "clone" });
视觉反馈
给用户提供反馈,就像以助手方式拖拽对象一样。helper 选项接受值 ‘original’(用光标移动 draggable 对象),‘clone’(用光标移动 draggable 的副本),或者一个返回 DOM 元素的函数(该元素在拖拽期间显示在光标附近)。通过 opacity 选项控制助手的透明度。
为了区别哪一个 draggable 正在被拖拽,让在运动中的 draggable 保持最前。如果正在拖拽,使用 zIndex 选项来设置助手的高度 z-index,或者使用 stack 选项来确保当停止拖拽时,最后一个被拖拽的项目总是出现在同组其他项目的上面。
$( "#draggable3" ).draggable({cursor: "move",cursorAt: { top: -12, left: -20 },helper: function( event ) {return $( "<div class='ui-widget-header'>I'm a custom helper</div>" );}
});
disabled
禁用draggable
$( ".selector" ).draggable({ disabled: true });
$( ".selector" ).draggable('disabled');
enable
启用
$( ".selector" ).draggable({ enable: true });
$( ".selector" ).draggable('enable');
其他选项、方法、事件等参照 jquery-ui-draggable-api
jquery-draggable总结相关推荐
- jquery draggable
概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的 ...
- html div draggable,jQuery – draggable div与缩放
您不需要设置缩放属性.我只是将差异添加到由于缩放属性而导致的draggable的位置.希望它有帮助. 小提琴 JS var zoom = $('#canvas').css('zoom'); var c ...
- [原] jQuery EasyUI 1.2.6源码、Demo合集、离线API
下载地址: http://files.cnblogs.com/purediy/jquery-easyui-1.2.6.zip 兄弟版本: jQuery EasyUI 1.3.4 离线API.Demo ...
- easyui源码翻译1.32--Messager(消息窗口)
前言 使用$.messager.defaults重写默认值对象.下载该插件翻译源码 消息窗口提供了不同的消息框风格,包含alert(警告框), confirm(确认框), prompt(提示框), p ...
- js插件类库组织与管理
testjs插件类库组织与管理 在开发一个较大规模的网站,js插件类库应用的是相当多.那么自然在一个页面里就存在不少script和script相关的link标记,这样js组织与管理自然成了一大问题. ...
- WEB入门之十九 UI
视频课:https://edu.csdn.net/course/play/7621 学习内容 jQuery UI核心 jQuery UI交互组件 jQuery UI微件 jQuery效果库 能力目标 ...
- 图像拼图:HTML游戏
目录 介绍 规则 关于代码 打破图像 随机化破碎的部分 拖放片段 设置样式 计算步骤 计时器 水平 浏览器兼容性 来自GitHub的JQuery版本 来自GitHub的JavaScript版本 介绍 ...
- Ui学习笔记---EasyUI的EasyLoader组件源码分析
Ui学习笔记---EasyUI的EasyLoader组件源码分析 技术qq交流群:JavaDream:251572072 1.问题1:为什么只使用了dialog却加载了那么多的js http: ...
- easyui源码翻译1.32--Window(窗口)
前言 扩展自$.fn.panel.defaults.使用$.fn.window.defaults重写默认值对象.下载该插件翻译源码 窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口.默认情况下,窗 ...
- Draggabilly中文文档
Draggabilly中文文档 根据Draggabilly官方文档翻译,由于英文水平有限,部分内容可能有误.本文档只翻译了主要的选项配置等,想了解更多请查看官方文档. js拖拽插件 1.0版本支持ie ...
最新文章
- 解除微信回调的Activity必须在包名.wxapi下的限制
- PTA 基础编程题目集 7-6 混合类型数据格式化输入 C语言
- Win2003利用dfs(分布式文件系统)在负载均衡下的文件同步配置方案
- sharepoint 2010 内容类型
- HTML5 Canvas
- GMQ稳定币为区块链资产在金融市场的进一步应用打开了一扇大门
- slf4j注解log报错_SpringBoot自定义日志注解,用于数据库记录操作日志,你用过吗?...
- 上班能赚到第一桶金吗?
- 特征提取、特征描述、特征匹配的通俗解释
- 2021-06-15
- 局域网系统设计的主要内容
- Python向数据库表格里插入万级数据
- scratch 游戏html5,scratch3转换为html5
- 没有事业的女孩子很悲惨 - - - 一位老总的话!
- ubuntu安装homeassistant
- (4)ArcGIS 10.2 去除要素的Z值和M值
- C#excelpackage读写Excel文件
- 《测绘管理与法律法规》真题易错本
- Linux下github的下载和使用
- (十二)采购与入库数据表
热门文章
- Android客户端与服务器用Socket进行通信
- Linux中nohup命令使用介绍
- Linux一键部署duckchat,DuckChat 1.0.7发布,十分钟快速搭建聊天系统
- nginx send_timeout 超时导致的302 错误
- 如何通过深度学习轻松实现自动化监控
- 【计算机网络】使用WireShark数据包抓取与分析
- MsSql2005 CharIndex的用法
- 幻影成像技术具备了哪些应用优势
- https://www.cnblogs.com/HD/p/4107674.html
- layui 导出 excel 表格