主要要点：
1.拖拽3大事件onmousedown，onmousemove，onmouseup
2. 要拖动的物体需要设置成position：absolute，这样在拖拽时改变left和top值才有效
3. onmousemove和up事件应该加在document上
4. 鼠标抬起的时候，清除onmousemove和up事件
需要清楚上面途中一些变量的意思
完整测试代码：
<body> <div id="dragDiv"></div> </body><style> #dragDiv{ width: 100px;height: 100px; background: green; position: absolute; } </style>
<pre name="code" class="javascript"><script> window.onload = function () { var oDiv = document.getElementById('dragDiv'); var disX = 0; var disY = 0; oDiv.onmousedown = function(ev){ var ev = ev|| window.event; disX = ev.clientX - oDiv.offsetLeft;//鼠标按下时光标的x值和 div左边框的距离 disY = ev.clientY - oDiv.offsetTop; //鼠标按下时光标的x值和 div上边框间的距离 if(oDiv.setCapture){ oDiv.setCapture();// 为了解决IE老版本的bug } document.onmousemove = function (ev) { var ev = ev || window.event; //拖拽限制范围, var L = ev.clientX- disX; var T = ev.clientY - disY; // 获取浏览器窗口的宽高 var clientW = document.documentElement.clientWidth || document.body.clientWidth; var clientH = document.documentElement.clientHeight || document.body.clientHeight; var maxW = clientW-oDiv.offsetWidth; // 可拖拽的最大宽度 var maxH = clientH-oDiv.offsetHeight; // 可拖拽的最大高度 if(L<0){ L = 0;// 当贴住浏览器窗口的左边框就不能再拖了 } if(L>maxW){ L = maxW; // 当贴住浏览器窗口的右边框就不能再拖了 } if(T<0){ T = 0;// 当贴住浏览器窗口的上边框就不能再拖了 } if(T>maxH){ T = maxH; // 当贴住浏览器窗口的下边框就不能再拖了 } oDiv.style.left = L +'px'; oDiv.style.top = T +'px'; }; document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; if(releaseCapture){ oDiv.releaseCapture(); } } } return false; } </script>
1. 浏览器会有一些默认的行为，会造成拖拽产生bug，所以需要在最后通过return false，阻止浏览器默认行为IE8之前版本，选中一些元素之后再进行拖拽，会出现禁止拖拽图标这样的小bug
需要在拖拽时利用setCapture生成一个透明的层
在鼠标抬起后再用releaseCapture释放这个层
原文地址：http://blog.csdn.net/u014205965/article/details/45913747
