一起来写段JS drag拖动代码


Posted in Javascript onDecember 09, 2010

1、为要被拖移三个事件,onmousedown,onmousemove,onmouseup
2、在onmousemove事件中来处理被拖移元素的位置的变化,其实说白了元素要移动的距离就是鼠标两次移动之间的距离。
3、其中还包括setCapture,releaseCapture,目的就是为了被搬移的元素始终能拥有焦点。
以前大致就是以前的认识,可以参见 JS拖动技术--- 关于setCapture 这个实现,后来随着工作要求的提高,做的工作都是要跨浏览器的,所以就重新构思并参考一些开源代码做了实现。
现在大致思路可分析为以下几步,我一一为您展现。
1、 我们是为了拖移而搬移吗?当然不是,如google地图,当每次搬移后他的目的是为了计算当前空间坐标来加载地理信息。所以我这里设计了几个常见事件。以下是事件列表
onDragStart :元素发生拖移时,如果注册该事件,触发时会接收到两个参数x,y分别为被搬移元素发生拖移时的坐标
onDrag : 元素拖移过程中,如果注册该事件,触发时会接收到两个参数nx,ny拖移过程中坐标发生的偏移量
onDragEnd :元素发生结束时,如果注册该事件,触发时会接收到两个参数x,y分别为被搬移元素的当前坐标
2、 onmousedown事件应该绑定给谁?以前我都是绑定给被拖移元素的,后来发现很不灵活,现在设计为可绑定给任意不相关的元素同时实现该元素的拖动。
3、 如何来实现元素搬移过程中一直拥有焦点?因为要跨浏览器,所以就不再用setCapture之类的方法,这里换种思维,为什么元素元素搬移过程中没有了焦点呢,主要是我们把onmousemove事件注册到了被拖移的元素上,而这并不是必需的,所以当元素触发onmousedown事件后,我把onmousemove、onmouseup事件直接注册到document上,这样鼠标移到哪都会有焦点。
说完了这么多,直接看代码结构吧!

Drag = { 
obj: null, 
init: function (options) { 
options.handler.onmousedown = this.start; 
options.handler.root = options.root || options.handler; 
var root = options.handler.root; 
root.onDragStart = options.dragStart || new Function(); 
root.onDrag = options.onDrag || new Function(); 
root.onDragEnd = options.onDragEnd || new Function(); 
}, 
start: function (e) {//此时的this是handler 
var obj = Drag.obj = this; 
obj.style.cursor = 'move'; 
e = e || Drag.fixEvent(window.event); 
ex = e.pageX; 
ey = e.pageY; 
obj.lastMouseX = ex; 
obj.lastMouseY = ey; 
var x = obj.root.offsetLeft; 
var y = obj.root..offsetTop; 
obj.root.style.left = x + "px"; 
obj.root.style.top = y + "px"; 
document.onmouseup = Drag.end; 
document.onmousemove = Drag.drag; 
obj.root.onDragStart(x, y); 
}, 
drag: function (e) { 
e = e || Drag.fixEvent(window.event); 
ex = e.pageX; 
ey = e.pageY; 
var root = Drag.obj.root; 
var x = root.style.left ? parseInt(root.style.left) : 0; 
var y = root.style.top ? parseInt(root.style.top) : 0; 
var nx = ex - Drag.obj.lastMouseX + x; 
var ny = ey - Drag.obj.lastMouseY + y; 
root.style.left = nx + "px"; 
root.style.top = ny + "px"; 
Drag.obj.root.onDrag(nx, ny); 
Drag.obj.lastMouseX = ex; 
Drag.obj.lastMouseY = ey; 
}, 
end: function (e) { 
var x = Drag.obj.root.style.left ? parseInt(Drag.obj.root.style.left) : 0; 
var y = Drag.obj.root.style.top ? parseInt(Drag.obj.root.style.top) : 0; 
Drag.obj.root.onDragEnd(x, y); 
document.onmousemove = null; 
document.onmouseup = null; 
Drag.obj = null; 
}, 
fixEvent: function (e) { 
e.pageX = e.clientX + document.documentElement.scrollLeft; 
e.pageY = e.clientY + document.documentElement.scrollTop; 
return e; 
} 
}

上面init主要处理一些初如化工作,如记录onDragStart、onDrag、onDragEnd三个事件, handler为处理拖动事件的那个元素,root为被拖动的元素。
当在handler上点击后触发Drag.start方法,Drag.start主要为记录住鼠标相对整个页面的位置;给document注册onmouseup、onmousemove事件,及触发onDragStart事件。
Drag.drag方法也很简单,主要作用就是更新被搬移元素位置,同时记录住鼠标相对整个页面的位置。
Drag.end方法就更简单了,就是做一些收尾工作。

最后给大家附段使用的代码吧,祝大家学习愉快!

Drag.init({ 
handler: document.getElementById("handler"), 
root:document.getElementById("root"); 
}); 
<div id="root"> 
<h2 id="handler"></h2> 
</div>
Javascript 相关文章推荐
用 JSON 处理缓存
Apr 27 Javascript
getElementByIdx_x js自定义getElementById函数
Jan 24 Javascript
JS关键字变色实现思路及代码
Feb 21 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
jQuery DOM操作实例
Mar 05 Javascript
js实现碰撞检测特效代码分享
Oct 16 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
AugularJS从入门到实践(必看篇)
Jul 10 Javascript
VsCode插件整理(小结)
Sep 14 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 Javascript
tracking.js页面人脸识别插件使用方法
Apr 16 Javascript
教您去掉ie网页加载进度条的方法
Dec 09 #Javascript
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 #Javascript
基于jQuery的一个扩展form序列化到json对象
Dec 09 #Javascript
来自国外的页面JavaScript文件优化
Dec 08 #Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 #Javascript
javascript中callee与caller的用法和应用场景
Dec 08 #Javascript
js下通过prototype扩展实现indexOf的代码
Dec 08 #Javascript
You might like
php批量删除数据
2007/01/18 PHP
PHP 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
PHP中遍历stdclass object的实现代码
2011/06/09 PHP
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
php批量更改数据库表前缀实现方法
2013/10/26 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
2010/11/25 Javascript
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
详解用node编写自己的cli工具
2017/05/23 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
微信小程序使用map组件实现解析经纬度功能示例
2019/01/22 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
使用Python下载歌词并嵌入歌曲文件中的实现代码
2015/11/13 Python
python实现聚类算法原理
2018/02/12 Python
Pytorch使用MNIST数据集实现CGAN和生成指定的数字方式
2020/01/10 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
Java程序员常见面试题
2015/07/16 面试题
大学生入党思想汇报
2014/01/14 职场文书
大学生开西餐厅创业计划书
2014/02/01 职场文书
学徒工职责
2014/03/06 职场文书
初中生期末评语大全
2014/04/24 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android
Python Django模型详解
2021/10/05 Python
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS
Android studio 简单计算器的编写
2022/05/20 Java/Android