学习drag and drop js实现代码经典之作

更新时间：2009年04月27日 01:55:25 作者：

今天读John Resig的Pro Javascript Techniques时候看到他书上给的一个关于drag and drop的例子, 合上书本自己写一个简化版本的。大约20分钟完成，没有考虑兼容firefox。整个代码封装成一个对象也是借鉴书中的风格。我觉得很好。

Pro Javascript Techniques书中推荐的drag and drop 例子：http://boring.youngpup.net/2001/domdrag

<html> <head> <title>Drag</title> <style type="text/css"> </style> <script type="text/javascript"> var Drag = {         //当前被drag的对象 obj: null, //初始化 init: function(id){ var o = document.getElementById(id); //当onmousedown开始拖拽 o.onmousedown = Drag.start; }, start: function(e){ var o = Drag.obj = this; //lastMouseX，lastMouseY记录上次鼠标的位置 o.lastMouseX = Drag.getEvent(e).x; o.lastMouseY = Drag.getEvent(e).y; //当onmousemove开始移动 document.onmousemove = Drag.move; //当onmouseup终止拖拽 document.onmouseup = Drag.end; }, move: function(e){ var o = Drag.obj; //dx, dy表示鼠标移动的距离 var dx = Drag.getEvent(e).x - o.lastMouseX; var dy = Drag.getEvent(e).y - o.lastMouseY; //因为element.style.left通常返回的结果是'200px'的形式，所以要用parseInt转化 var left = parseInt(o.style.left) + dx ; var top = parseInt(o.style.top) + dy; o.style.left = left; o.style.top = top; o.lastMouseX = Drag.getEvent(e).x; o.lastMouseY = Drag.getEvent(e).y; }, end: function(e){ document.onmousemove = null; document.onMouseup = null; Drag.obj = null; }, //辅助函数，处理IE和FF不同的event模型 getEvent: function(e){                                 if (typeof e == 'undefined'){                                     e = window.event;                                 }                                 //alert(e.x?e.x : e.layerX);                                 if(typeof e.x == 'undefined'){                                     e.x = e.layerX;//复制了n遍，到了csdn就变成ee.x了                                 }                                 if(typeof e.y == 'undefined'){                                     e.y = e.layerY;//复制了n遍，到了csdn就变成ee.x了                                 }                                 return e;                         } };         </script> </head> <body> <div id="r" style="position:absolute; left:100px; top:100px; background-color:red; height:80px; width:80px;"></div> <div id="g" style="position:absolute; left:250px; top:100px; background-color:green; height:80px; width:80px;"></div> <div id="b" style="position:absolute; left:400px; top:100px; background-color:blue; height:80px; width:80px;"></div> </body> <script type="text/javascript">     //测试代码开始，使三个div具有drag and drop的能力。 Drag.init('r'); Drag.init('g'); Drag.init('b');         </script> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

打包下载地址

您可能感兴趣的文章:

JavaScript实现的CRC32函数示例
这篇文章主要介绍了JavaScript实现的CRC32函数,简单介绍了CRC32函数的概念和功能,并给出实例形式分析了CRC32函数的javascript实现与使用方法,需要的朋友可以参考下
2016-11-11
分享javascript计算时间差的示例代码
这篇文章主要为大家介绍了javascript计算时间差的示例代码，，一般来说都是计算当前时间和一个指定时间点之间的差距，感兴趣的小伙伴们可以参考一下
2016-01-01
JS实现无限轮播无倒退效果
这篇文章主要为大家详细介绍了JS实现无限轮播无倒退效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
Omi v1.0.2发布正式支持传递javascript表达式
这篇文章主要介绍了Omi v1.0.2发布正式支持传递javascript表达式,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-03-03
关于火狐(firefox)及ie下event获取的两种方法
经常有同事问我在火狐浏览器怎么获取event的方法，大多是想获取event.keyCode的功能,接下来为您介绍两种实现方法，需要了解的朋友可以参考下
2012-12-12
JS将光标聚焦在文本最后的实现代码
这篇文章主要介绍了JS将光标聚焦在文本最后的方法,需要的朋友可以参考下
2014-03-03
浅析TypeScript中的类型检查与错误捕获
类型检查是一种静态分析的过程，用于验证变量、函数和表达式的类型是否符合预期，这篇文章主要来和大家聊聊TypeScript中类型检查与错误捕获的相关知识，希望对大家有所帮助
2023-06-06
javascript实现手机震动API代码
一个新的API出来了。HTML5 （很快）将支持用户设备振动。这明显是很有趣的事情，比如它可以用户触发提醒，提升游戏体验，下面小编给大家整理javascript手机震动api，需要的朋友可以参考下
2015-08-08
javasript实现密码的隐藏与显示
用户输入密码时都是显示的星号了，那么我们希望查看明文要怎么查看呢，下面我们只要使用一段简单的js就可以实现查看密码框的明文了，有需要的小伙伴可以来参考下。
2015-05-05
网站页面自动跳转实现方法PHP、JSP（上）
自动转向，也叫自动重定向。自动跳转，指当访问用户登陆到某网站时，自动将用户转向其它网页地址的一种技术。转向的网页地址可以是网站内的其它网页，也可以是其它网站。
2010-08-08