一起来写段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 相关文章推荐
Javascript 网页水印(非图片水印)实现代码
Mar 01 Javascript
Javascript继承(上)——对象构建介绍
Nov 08 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 Javascript
javascript实现控制文字大中小显示
Apr 28 Javascript
jQuery实现的AJAX简单弹出层效果代码
Nov 26 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
Nov 10 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 Javascript
原生js封装的ajax方法示例
Aug 02 Javascript
如何在JavaScript中正确处理变量
Dec 25 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下MAIL的另一解决方案
2006/10/09 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
2014/05/22 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
2017/02/08 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
JavaScript实现多个物体同时运动
2020/03/12 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
np.random.seed() 的使用详解
2020/01/14 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
高级运动鞋:GREATS
2019/07/19 全球购物
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
销售高级职员求职信
2013/10/29 职场文书
鼓励运动员的广播稿
2014/02/08 职场文书
关于环保的建议书400字
2014/03/12 职场文书
《郑和远航》教学反思
2014/04/16 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
欠条范文
2015/07/03 职场文书
Python自动化之批量处理工作簿和工作表
2021/06/03 Python