一起来写段JS drag拖动代码


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>



相关阅读:
第二章 PHP入门基础之php代码写法
基于ASP.NET的数据迁移办法
安全基础:简单解析Linux系统防火墙框架
搜索引擎核心技术(PHP编程思路) --[1]
SQL 提权 常用命令
巧用Recent模块加固Linux安全
xp_cmdshell开启与关闭
IE8 css overflow:hidden不起作用
JSP application(return String)用法详例
概述Oracle中的数据库名
XHTML教程一
初学者接触HTML了解一些HTML标记(3)
如何使用SQL 事件探查器?
初探SQL Server 2008综合数据可编程性
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 戳中泪点的伤感句子 40分钟“模特”500字 做事先做人,好的人品将有助于你走上成功之路 高中高三作文1200字:喜羊羊与灰太狼之变脸蛋糕 人生的风风雨雨作文1200字 由修正带想到的 的寒假作文 影子给我的一封信】 写给闺蜜生日的感人日志 浅谈商务服饰礼仪 半边江山,半边城 看图写话:看书 红领巾剧场观后感2篇 老街印象(六十四)续 2016母亲节祝福寄语 2016拜读西柏坡-红色之旅心得体会 在生命里的一天天翠绿里 凤凰美景诉浓情 初三的小时光,零零碎碎作文 母亲节快乐作文600字 2015浙江省聘请常年法律顾问合同 山羊和毛驴 试论商业步行街的规划建设--以珠海市莲花路为例 没有资格的爱 幸福时光 《老公,下辈子我还要睡在你的枕边》读后感 我把爱捧在手心中作文800字 读《祖国在我心中》有感650字 这件事真让我难忘1000字 谁偷了戒指 岁月流逝 免费高2007届诗词鉴赏专题复习学案4.doc(51)k 2016辞职理由 我爱我的妈妈500字 告别六一2009.9,1 爱情就像一场赌注 请珍惜资源 回到唐朝 学校后勤人员工作计划 春节游园活动邀请函 关于幼儿园小班教育笔记精选 去打工--在车上 技术员工工作总结鉴定 关于党的作文:共产党,新中国 智慧做人的句子 中学2013年工作计划 素衣如笺,梦若心莲 我与绿色的紧急对话 济公的十九句话 震撼全世界 描写美丽的田野作文200字

Copyright © 2016 phpStudy |