一起来写段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开发随笔一 preventDefault的必要
Nov 25 Javascript
js分页工具实例
Jan 28 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
jquery实现简单实用的打分程序实例
Jul 23 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
laydate.js日期时间选择插件
Jan 04 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
bootstrap-table组合表头的实现方法
Sep 07 Javascript
JavaScript实现单例模式实例分享
Dec 22 Javascript
vue树形结构获取键值的方法示例
Jun 21 Javascript
微信小程序实现简单跑马灯效果
May 26 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 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 获取本机外网/公网IP的代码
2010/05/09 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
2017/02/13 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
python基础while循环及if判断的实例讲解
2017/08/25 Python
Scrapy抓取京东商品、豆瓣电影及代码分享
2017/11/23 Python
Python IDLE清空窗口的实例
2018/06/25 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
体育专业学生自我评价范文
2014/01/17 职场文书
园林技术个人的自我评价
2014/02/15 职场文书
标准化管理实施方案
2014/02/25 职场文书
新文化运动的口号
2014/06/21 职场文书
2014年导购员工作总结
2014/11/18 职场文书
培养联系人考察意见
2015/06/01 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
小学毕业教师寄语
2019/06/21 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript
Python爬虫入门案例之爬取去哪儿旅游景点攻略以及可视化分析
2021/10/16 Python
Python的三个重要函数详解
2022/01/18 Python
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL