js 拖拽 DIV

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <style>
     * {margin:0; padding:0;}
     #div1 {width:100px;height: 100px; background:#CCC; border:1px solid black; position:absolute;}
 </style>
 <script>
 window.onload=function () {

     var oDiv=document.getElementById("div1");
     var disX=0;//鼠标距离物体的X位置
     var dixY=0;

     //鼠标按下的时候
     oDiv.onmousedown=function (ev) {
         var oEvent=ev||event;
         disX=oEvent.clientX-oDiv.offsetLeft;
         dixY=oEvent.clientY-oDiv.offsetTop;

         //鼠标移动的时候,必须在鼠标按下的时候，才能开启鼠标移动事件，
         // 加在document上是防止，速度过快，鼠标不在DIV上，就没有移动事件了
         document.onmousemove=function (ev) {
             var oEvent=ev||event;
             var oDivLeft=oEvent.clientX-disX; //div X位置=鼠标位置-（鼠标和div的距离）
             var oDivTop=oEvent.clientY-dixY;

             if(oDivLeft<0){//小于0 ,是判断DIV 不能脱出浏览器左边的位置
                 oDivLeft=0;
             }else if(oDivLeft>document.documentElement.clientWidth-oDiv.offsetWidth){
                 //大于可视区 ,是判断DIV 不能脱出浏览器又边的位置
                 oDivLeft=document.documentElement.clientWidth-oDiv.offsetWidth;
             }

             if(oDivTop<0){//小于0 ,是判断DIV 不能脱出浏览器上边的位置
                 oDivTop=0;
             }else if(oDivTop>document.documentElement.clientHeight-oDiv.offsetHeight){

                 oDivTop=document.documentElement.clientHeight-oDiv.offsetHeight;
             }


             oDiv.style.left=oDivLeft+"px";
             oDiv.style.top=oDivTop+"px";

         }
         //鼠标抬起事件，
         document.onmouseup=function () {
             document.onmousemove=null;//鼠标抬起时，清除鼠标移动事件
             document.onmouseup=null;//清除没有意义的事件
         }
         return false;//是阻止浏览器的默认行为，其中包括火狐低版本的BUG

     }


 }
 </script>


 <body >
 <div id="div1"></div>
 </body>
 </html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容