js实现Div拖拽 - 爱码网

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>js实现Div拖拽</title>
 6     <style>
 7         div{
 8             width: 200px;
 9             height: 100px;
10             background: yellow;
11             position: absolute;
12             left: 10px;
13             top: 10px;
14             cursor: move;
15         }
16     </style>
17     <script>
18         window.onload = function () {
19             var div = document.getElementsByTagName("div")[0];
20             div.onmousedown = function (par) {
21                 e=par||event;
22                 document.onmousemove = function (par1) {
23                     e1=par1||event;
24                     div.style.top = e1.clientY-e.offsetY+"px";
25                     div.style.left = e1.clientX-e.offsetX+"px";
26                 }
27                 document.onmouseup = function () {
28                     document.onmousemove="";
29                 }
30             }
31         }
32     </script>
33 </head>
34 <body>
35 
36     <div></div>
37 
38 </body>
39 </html>