这篇文章主要讲了javascript中鼠标的拖动事件，感兴趣的朋友可以参考一下，希望可以帮助到你！
第一步，定义被拖放的元素为绝对定位或者相对定位
第二部，清楚几个坐标的概念：按下鼠标时指针坐标（event.pagex和event.pagey）,松开鼠标时指针坐标，拖放元素的原始坐标，拖放后元素的坐标
<!doctype html><html><head><meta charset="utf-8"><title></title><style type="text/css">#box{ position:absolute; width:200px; height:200px; overflow:hidden; padding:4px; border:solid 4px #59f182;}#box img {width:100%;}</style><script></script></head><body><p id="box" ><img src="images/bg.jpg" /></p><script>// 初始化拖放对象var box = document.getelementbyid(box); // 获取页面中被拖放元素的引用指针box.style.position = absolute; // 绝对定位// 初始化变量，标准化事件对象var mx, my, ox, oy; // 定义备用变量function e(event){ // 定义事件对象标准化函数 if( ! event){ // 兼容ie浏览器 event = window.event; event.target = event.srcelement; event.layerx = event.offsetx; event.layery = event.offsety; } event.mx = event.pagex || event.clientx + document.body.scrollleft; // 计算鼠标指针的x轴距离 event.my = event.pagey || event.clienty + document.body.scrolltop; // 计算鼠标指针的y轴距离 return event; // 返回标准化的事件对象}// 定义鼠标事件处理函数document.onmousedown = function(event){ // 按下鼠标时，初始化处理 event = e(event); // 获取标准事件对象 o = event.target; // 获取当前拖放的元素 ox = parseint(o.offsetleft); // 拖放元素的x轴坐标 oy = parseint(o.offsettop); // 拖放元素的y轴坐标 mx = event.mx; // 按下鼠标指针的x轴坐标 my = event.my; // 按下鼠标指针的y轴坐标 document.onmousemove = move; // 注册鼠标移动事件处理函数 document.onmouseup = stop; // 注册松开鼠标事件处理函数}function move(event){ // 鼠标移动处理函数 event = e(event); o.style.left = ox + event.mx - mx + px; // 定义拖动元素的x轴距离 o.style.top = oy + event.my - my + px; // 定义拖动元素的y轴距离}function stop(event){ // 松开鼠标处理函数 event = e(event); ox = parseint(o.offsetleft); // 记录拖放元素的x轴坐标 oy = parseint(o.offsettop); // 记录拖放元素的y轴坐标 mx = event.mx ; // 记录鼠标指针的x轴坐标 my = event.my ; // 记录鼠标指针的y轴坐标 o = document.onmousemove = document.onmouseup = null; // 释放所有操作对象}</script></body></html>
更多相关教程请访问 javascript视频教程