js事件处理相关-实现一个div的拖拽-优快云博客

本文介绍了一个简单的HTML+CSS+JavaScript实现的DIV拖拽案例。通过设置DIV元素的样式并利用JavaScript监听鼠标事件，实现了DIV元素在网页上的自由拖动。需要注意的是，在获取元素位置时直接使用oDiv.style.left可能无法得到正确的结果。

最终代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6     <meta charset="utf-8" />
 7     <style type="text/css">
 8         #divTest {
 9             width : 200px;
10             height : 200px;
11             background-color : red;
12             border : 1px solid #00ffff;
13             position : absolute;
14         }
15     </style>
16 </head>
17 <body>
18     测试一下
19     <div id="divTest">
20     </div>
21 
22     <script type="text/javascript">
23         var oDiv = document.getElementById("divTest");
24         oDiv.onmousedown = function (en) {
25             var ev = ev || event;
26             var disX = en.clientX - oDiv.offsetLeft;
27             var disY = en.clientY - oDiv.offsetTop;
28             if (oDiv.setCapture) {
29                 oDiv.setCapture();
30             }
31 
32             document.onmousemove = function (en) {
33                 var ev = ev || event;
34                 oDiv.style.top = en.clientY - disY + 'px';
35                 oDiv.style.left = en.clientX - disX + 'px';
36             }
37             document.onmouseup = function () {
38                 document.onmousemove = null;
39                 if (oDiv.releaseCapture) {
40                     oDiv.releaseCapture()
41                 }
42             }
43             return false;//阻止默认行为（如果页面中有文字，则会默认拖动文字），ie8及一下不行
44         }
45     </script>
46 
47 </body>
48 </html>