实现可拖动的div

 1 <script type="text/javascript">        
 2         var draggable = false;//标志是否可以操作div
 3         var offsetX = 0;//鼠标指针x坐标的减去div左上角顶点x坐标
 4         var offsetY = 0;//鼠标指针y坐标的减去div左上角顶点y坐标
 5         
 6         window.onload = function() {
 7             var divEle = document.getElementById("divEle");
 8             divEle.style.position = "absolute";//将div设置为绝对定位
 9 
10             divEle.onmousedown = function () {
11                 draggable = true;
12                 offsetY = event.clientY - divEle.offsetTop;
13                 offsetX = event.clientX - divEle.offsetLeft;
14             }
15 
16             divEle.onmouseup = function () {
17                 draggable = false;//鼠标弹起来的时候draggable为false失效
18             }
19 
20             divEle.onmousemove = function () {
21                 if (draggable) {
22                     //拖动
23                     this.style.left = event.clientX - offsetX + "px";
24                     this.style.top = event.clientY - offsetY + "px";
25                 }
26             }
27 
28             divEle.onmouseout = function () {
29                 draggable = false;//鼠标离开div元素时draggable为false失效
30             }
31         }
32     </script>
33     <div id="divEle"></div>