js拖拽效果

 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>