JS事件中级 --- 拖拽

http://bbs.zhinengshe.com/thread-1200-1-1.html

要求：实现div块的拖拽

原理：拖拽过程中鼠标点和div块的相对位置保持不变。

需要理解三点：

1. 为什么要把onmousemove，onmouseup加在document上面？

2. onmouseup要怎么使用？

3. 如何防止div块跑出边界？

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style>

         #div1 {

             width: 200px;

             height: 200px;

             background-color: red;

             position: absolute;

         }

     </style>

     <script>

         window.onload = function () {

             var oDiv = document.getElementById("div1");

             var disX = 0;

             var disY = 0;

             oDiv.onmousedown = function (event) {

                 disX = event.clientX - oDiv.offsetLeft;

                 disY = event.clientY - oDiv.offsetTop;

                 document.onmousemove = function (event) {

                     var divLeft = event.clientX - disX;

                     var divTop = event.clientY - disY;

                     if (divLeft < 0) divLeft = 0;

                     if (divLeft > document.documentElement.clientWidth-oDiv.offsetWidth) {

                         divLeft = document.documentElement.clientWidth-oDiv.offsetWidth;

                     }

                     if (divTop < 0) divTop = 0;

                     if (divTop > document.documentElement.clientHeight - oDiv.offsetHeight) {

                         divTop = document.documentElement.clientHeight - oDiv.offsetHeight;

                     }

                     oDiv.style.left = divLeft + "px";

                     oDiv.style.top = divTop + "px";

                 };

                 document.onmouseup = function () {

                     document.onmousemove = null;

                     document.onmouseup = null;

                 }

             };

         }

     </script>

 </head>

 <body>

     <div id="div1"></div>

 </body>

 </html>

运行效果：【点击这里】

巴特西

JS事件中级 --- 拖拽

最新文章

热门文章