一个超简单的JS拖拽实现代码(兼容IE,Firefox)

更新时间：2010年04月03日 09:53:55 作者：

网上找的一个超简单的JS拖拽，喜欢拖拽效果的朋友可以参考下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>runcode</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="Author" content="Sheneyan" /> <script type="text/javascript"> /** *取得元素的真实css属性 *@param {Object} d 元素 *@param {String} a 元素的css属性名 *@version 0.2 */ function gs(d,a){ if (d.currentStyle){ var curVal=d.currentStyle[a] }else{ var curVal=document.defaultView.getComputedStyle(d, null)[a] } return curVal; } /** * 取得鼠标坐标 * @return Position */ function getMouseLocation(e){ if(!document.all){ mouseX = e.pageX; mouseY = e.pageY; } else{ mouseX = event.x + document.body.scrollLeft; mouseY = event.y + document.body.scrollTop; } return {x:mouseX,y:mouseY}; } /** * 拖动对象 * @param {DOM Object} DOM对象 */ function drag(e,obj){ var p1 = getMouseLocation(e); var startRight = null; var startTop = null; var startLeft = null; var startBottom = null; var l = gs(obj,"left"); var r = gs(obj,"right"); var t = gs(obj,"top"); var b = gs(obj,"bottom"); if(!l) startRight = parseInt(r); else startLeft = parseInt(l); if(!t) startBottom = parseInt(b); else startTop = parseInt(t); if(obj.setCapture) obj.setCapture(); else if (window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); document.onmousemove = function(e){ var p2 = getMouseLocation(e); var xMove = p2.x-p1.x; var yMove = p2.y-p1.y; if(!l) obj.style.right = (startRight - xMove)+"px"; else obj.style.left = (startLeft + xMove)+"px"; if(!t) obj.style.bottom = (startBottom - yMove)+"px"; else obj.style.top = (startTop + yMove)+"px"; } document.onmouseup = function(){ if(obj.releaseCapture) obj.releaseCapture(); else if (window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); document.onmouseup = null; document.onmousemove = null; } } </script> <style type="text/css"> div#test{border:solid 1px blue;background:red;position:absolute;left:100px;top:200px;width:200px;height:200px;cursor:pointer;} </style> </head> <body> <div id="test" onmousedown="drag(event,this)">拖我拖我拖我拖我拖我拖我拖我<div> </body> </html>

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

javascript支持firefox,ie7页面布局拖拽效果代码

您可能感兴趣的文章:

JS
拖拽

详解JavaScript逻辑And运算符
这篇文章主要介绍了JavaScript逻辑And运算符，在JavaScript中，逻辑 AND 运算符用双和号（&&）表示
2015-12-12
js实现在字符串中提取数字
js实现在字符串中提取数字。需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
JS中‘hello’与new String(‘hello’)引出的问题详解
这篇文章主要给大家介绍了关于JS中'hello'与new String('hello')引出的问题的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧
2018-08-08
JavaScript实现获得所有兄弟节点的方法
这篇文章主要介绍了JavaScript实现获得所有兄弟节点的方法,实例分析了javascript节点遍历的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-07-07
JS数组去重的常用4种方法
这篇文章主要介绍了JS数组去重的常用4种方法,ES6的Set类数组去重,for循环嵌套for循环,indexOf去重,利用filter需要的朋友可以参考下
2022-04-04
让JavaScript代码更加精简的方法技巧
这篇文章主要介绍了让JavaScript代码更加精简的方法技巧,文章通过使用 JavaScript对象解构来节省代码，JavaScript 对象解构赋值在项目开发中是一个常用的技能。下文实现过程需要的小伙伴可以参考一下
2022-06-06
CSS(js)限制页面显示的文本字符长度
限制页面显示的字符长度，一直被众多网友倾睬，本人也是一fans利用闲暇时间搜集整理了一些实用技巧,需要了解的朋友可以参考下
2012-12-12
微信小程序自定义导航教程（兼容各种手机）
这篇文章主要给大家介绍了关于微信小程序自定义导航的相关内容，文中通过示例代码介绍的非常详细，兼容各种手机,对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-12-12
javascript 静态对象和构造函数的使用和公私问题
静态对象和构造函数的使用区别平常我们会经常使用JSON形式，或者var obj=function(){}亦或function(){}这么几种对象的构建办法，有时会认为这是等价的办法，然而他们还有不同。
2010-03-03
Js制作简单弹出层DIV在页面居中中间显示遮罩的具体方法
这篇文章介绍了Js制作简单弹出层DIV在页面居中中间显示遮罩的具体方法，有需要的朋友可以参考一下
2013-08-08

一个超简单的JS拖拽实现代码(兼容IE,Firefox)

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具