js 拖拽 DIV

作者: 发光驴子 | 来源:发表于2017-10-13 00:16 被阅读0次

js 拖拽 DIV
JS拖拽div
事件应用
事件应用
div 拖拽
拖拽div的值到table
元素拖拽排序
可拖拽div
可拖拽div
js拖拽html元素工具类

 <!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>