一起来写段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 相关文章推荐
jQuery.clean使用方法及思路分析
Jan 07 Javascript
js 日期比较相关天数代码
Apr 02 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
Sep 01 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 Javascript
js实现图片懒加载效果
Jul 17 Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
基于vue 实现token验证的实例代码
Dec 14 Javascript
Vuex的actions属性的具体使用
Apr 14 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 Javascript
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
教您去掉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替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
Jquery Ajax请求代码(2)
2011/01/07 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
AngularJS路由删除#符号解决的办法
2017/09/28 Javascript
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
Python中的hypot()方法使用简介
2015/05/18 Python
Python将图片转换为字符画的方法
2020/06/16 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
Android面试题及答案
2015/09/04 面试题
节约用水倡议书
2014/04/16 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
欢送会主持词
2015/07/01 职场文书
天气温馨提示语
2015/07/14 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
pytorch实现线性回归以及多元回归
2021/04/11 Python