学习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需再刷新一下页面才能执行]

打包下载地址

您可能感兴趣的文章:

在前端中Proj4.js使用简单介绍及进阶应用
这篇文章主要介绍了在前端中Proj4.js使用简单介绍及进阶应用的相关资料,Proj4是一个用于处理JavaScript里的几何图形和坐标计算的库,它提供了多边形、点、线等几何对象的计算功能,需要的朋友可以参考下
2025-01-01
Javascript中设置默认参数值示例
这篇文章主要介绍了Javascript中默认参数值的设置，很简单，但很实用，需要的朋友可以参考下
2014-09-09
javascript的函数、创建对象、封装、属性和方法、继承
从一开始接触到js就感觉好灵活，每个人的写法都不一样，比如一个function就有N种写法
2011-03-03
一文详解Canvas实现打飞字游戏过程示例
这篇文章主要为大家介绍了Canvas实现打飞字游戏示例过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
JavaScript中setInterval()用法举例详解
这篇文章主要给大家介绍了关于JavaScript中setInterval()用法的相关资料,setInterval()方法可按照指定的周期(以毫秒计)来调用函数或计算表达式,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
2023-10-10
JavaScript树形结构数组处理之递归问题
这篇文章主要介绍了JavaScript树形结构数组处理之递归问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事！
写这篇文章的目的是经常看到开发人员说：把字符串转化为JSON对象，把JSON对象转化成字符串等类似的话题，所以把之前收藏的一篇老外的文章整理翻译了一下，供大家讨论，如有错误，请大家指出，多谢
2012-01-01
JS+CSS实现随机点名(实例代码)
本文通过js html和cass代码实现了随机点名效果，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2019-11-11
浅谈微信小程序之官方UI框架we-ui使用教程
这篇文章主要介绍了浅谈微信小程序之官方UI框架we-ui使用教程，WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，感兴趣的小伙伴们可以参考一下
2018-08-08
Bootstrap每天必学之导航条
Bootstrap每天必学之导航条，本文向大家讲解了多种多样的导航条，以及导航条中元素的实现方法，感兴趣的小伙伴们可以参考一下
2015-11-11

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具