一起来写段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 交通频道 作文范文 大学期末自我总结 高中高一作文1000字:作文 高中生活展望 那朵美丽的桐花 高中军训心得体会1000字_高一军训日记 我的老师——冉振作文700字 [图文]惨遭毒蚊叮咬 最愚蠢的事就是把别人对你的好误以为是爱 读《数学家的故事》有感400字 难忘六一儿童节450 感恩慈母爱 9月推广数码产品活动策划 小学生春节联欢晚会观后感精选-五篇 播音主持自我介绍稿件 武汉科大在校大学生创业2年,资产已上千万 精选话务员实习报告范文 学习雷锋精神心得体会500字 树影在流泪作文 深圳的"独特美"作文900字 新版入党转正申请书格式之通用型 提高警惕珍爱生命 没有人读的懂他们 听听那雨声作文 快乐不等于傻逼,面对复杂的世界,请保持欢喜 魅力冬游 财政部门论提高县级政府采购质量与效率的问题及对策 小飞蛾,祝你做个好梦 凋谢的花朵 难忘的星期天作文100字 五四运动励志演讲《五月青春点燃梦想》 凝聚作文500 描写美食的优美句子 2015三重一大自查总结报告 世界,因爱更美丽作文500字 六一儿童节的遐想 小荷(二)作文300字 医院党委书记在纪念七一建党90周年暨总结表彰大会上的讲话 环境守法证明 那是一次缝纫的尝试 一年级语文下册《柳树醒了》教案8 春蕾杯答题 “人”字是必修的功课 情感日志 人生不必求完美,做人要能吃亏 减字木兰花(四侄过省候廷试席上作) 啊!我成功了! 武汉大学暑期社会实践 (2009327周记)乒乓球 xx市委党校关于贯彻落实全市领导干部大会精神的报告_情况报告 诗犹艳,梦亦香 论民营企业内外发展动力问题初探 北京这个城市作文1500字

Copyright © 2016 phpStudy |