1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js拖拽效果</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 var oDiv = document.getElementById('login'); 10 oDiv.onmousedown = function(e){ 11 var event = event || window.event;//window.event兼容IE,当事件发生时有效 12 13 var diffX = event.clientX - oDiv.offsetLeft;//获取鼠标点击的位置到所选对象的边框的水平距离 14 var diffY = event.clientY - oDiv.offsetTop; 15 16 document.onmousemove = function(e){//需设为document对象才能作用于整个文档 17 var e = e||window.event; 18 oDiv.style.left = e.clientX - diffX +'px';//style.left表示所选对象的边框到浏览器左侧距离 19 oDic.style.top = e.client - diffY +'px'; 20 } 21 document.onmouseup = function(){ 22 oDiv.onmousemove = null;//清除鼠标释放时的对象移动方法 23 oDiv.onmouseup = null; 24 } 25 } 26 </script> 27 </body> 28 </html>