javascript 实现拖动效果
在写这篇文章之前我一直在纠结一个问题，那就是以前实现的拖动拖快了总会有一些卡顿，脱节，不流畅，只能轻轻的小心翼翼的慢慢的拖拽，这样就失去了web页面中窗口拖动的意义，所以在这儿我分享出来和大家一起共同进步。
首先说一下javascript+div拖动的原理：
1.要拖动必然要触发3个事件，鼠标左键按下去（onmousedown）, 移动鼠标（onmousemove）, 释放鼠标左键（onmouseup）.
2.拖动之前必须要对目标对象（也就是需要拖动的div）进行初始化事件绑定，下面代码里面会详细介绍
3.下面就是拖动的详细步骤了，首先也拖动对象绑定一个onmousedown事件函数，这个事件函数里面控制一个状态，是否准备好拖动，获取拖动对象的坐标位置（这个坐标位置是相当于浏览器的）。然后在给document对象绑定onmousemove, 在onmousemove事件里面做捕获鼠标的坐标，让拖动对象的位置跟随鼠标的位置，重儿就实现了拖动。但拖到一定的位置总得停下来吧， 好，这个onmouseup事件处理函数就用上了，在这个事件函数里面只做一个事，那就是把拖动状态改为拖动停止。最后一点说说为什么要把onmousemove事件函数绑定在document上面而不是拖动对象上，如果是绑定在拖动对象上面就会出现本文开头说的卡顿， 脱节，不流畅，反正就是有各种不和谐因素。原因我也不是很明白，我想可能跟浏览器内部实现机制有关嘛， 如果有哪位大神知道请不吝赐教。
下面是源码，都很简单，我不是用javascript对象的方式去封装的，只要有一些简单的javascript，dom, css知识的都能看懂， 还有本人是第一次写博客，还请各位看官多提意见多多拍砖。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 6 <title>drag</title> 7 8 <script type="text/javascript" language="javascript"> 9 window.onload = function() { 10 var drag = document.getElementById("box"); 11 var x = 0, //初始化拖放对象的x坐标 12 y = 0, //初始化拖放对象的y坐标 13 isMove = false; //初始化拖放对象的状态， false停止移动，true开始移动 14 //开始移动 15 drag.onmousedown = function(e) { 16 isMove = true; 17 var evt = e || window.event; 18 //获取鼠标的位置，兼容多浏览器 19 x = evt.pageX ? evt.pageX : evt.clientX; 20 y = evt.pageY ? evt.pageY : evt.clientY; 21 x -= this.getBoundingClientRect().left; //获取拖动对象的x坐标 22 y -= this.getBoundingClientRect().top; //获取拖动对象的y坐标 23 }; 24 //移动中.. 25 document.onmousemove = function(e) { 26 if(isMove) { 27 var evt = e || window.event; 28 var ox = evt.pageX ? evt.pageX : evt.clientX; 29 var oy = evt.pageY ? evt.pageY : evt.clientY; 30 drag.style.left = (ox - x)+'px'; 31 drag.style.top = (oy - y)+'px'; 32 } 33 }; 34 //结束移动 35 document.onmouseup = function() { 36 isMove = false; 37 }; 38 }; 39 </script> 40 41 <style type="text/css"> 42 </style> 43 44 </head> 45 46 <body> 47 <div id="box" style="border:1px solid orange;width:50px;height:50px;cursor:move;position:absolute;left:100px;top:100px;background-color:white;"></div> 48 </body> 49 50 </html>
drag
