一个超简单的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数组长度问题代码说明
有趣的JavaScript数组代码示例,学习js的朋友可以参考下。注意以下的情况。
2011-01-01
javascript匿名函数应用示例介绍
匿名函数，顾名思义就是没有名字，下面有个不错的示例，大家可以学习下
2014-03-03
JavaScript手写call,apply,bind方法
这篇文章主要介绍了JavaScript手写call,apply,bind方法，call，bind，apply方法都是JavaScript原生的方法，挂载在Function原型上,使得所有函数都可以调用
2022-06-06
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
下面小编就为大家带来一篇深入浅出webpack教程系列_安装与基本打包用法和命令参数详解。小编觉得挺不错的，现在就想给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
js实现鼠标感应向下滑动隐藏菜单的方法
这篇文章主要介绍了js实现鼠标感应向下滑动隐藏菜单的方法,涉及javascript操作鼠标事件的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-02-02
JavaScript实现限时秒杀功能
各种电商活动都喜换选择限时秒杀活动形式，这篇文章主要为大家详细介绍了JavaScript实现限时秒杀功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
javascript匀速运动实现方法分析
这篇文章主要介绍了javascript匀速运动实现方法,结合实例形式分析了JavaScript匀速运动的具体实现步骤与相关注意事项,需要的朋友可以参考下
2016-01-01
ajax在js中和jQuery中的用法实例详解
Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写）,现在允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax,下面这篇文章主要给大家介绍了关于ajax在js中和jQuery中的用法,需要的朋友可以参考下
2021-08-08
浅析location.href跨窗口调用函数
本文详细介绍了location.href跨窗口调用函数，具体的使用方法及实例，有需要的朋友可以参考下
2016-11-11
javascript+xml技术实现分页浏览
基于web的技术中，分页是一个老的不能再老的，但大家津津乐道的问题，随着xml技术的日渐应用，把xml应用到分页当中，也是一种可能，当然网上的教程很多，当我都是看得稀里糊涂，索性自己写一个，与大家分享、指正。
2008-07-07