JS 事件基础边框拖拽

来源：互联网发布：抓小三软件下载编辑：程序博客网时间：2024/06/06 02:58

在拖拽中，使用边框拖拽，即在拖拽开始时，物体的边框先走，等移动停止后，物体在过去：
这里写图片描述

这里写图片描述

  <style>  #div1{    width: 200px;    height: 200px;    background-color: darkorange;    position: absolute;  }  .box{    position: absolute;    border:1px dashed black;  }  </style>  <script>  window.onload=function()  {    var oDiv=document.getElementById('div1');    var disX=0;    var disY=0;    //封装一个函数用于获取鼠标坐标        function getPos(ev)        {           var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;           var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;             return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};             }        oDiv.onmousedown=function(ev)        {           var oEvent=ev||event;           var pos=getPos(oEvent);  //这样就可以获取鼠标坐标，比如pos.x表示鼠标横坐标           var oBox=document.createElement('div');  //按下的时候创建一个边框           document.body.appendChild(oBox);  //将创建的边框放入body中；           oBox.className='box';  //设置这个oBox的class           oBox.style.width=oDiv.offsetWidth-2+'px';           oBox.style.height=oDiv.offsetHeight-2+'px';           oBox.style.left=oDiv.offsetLeft+'px';           oBox.style.top=oDiv.offsetTop+'px';           disX=pos.x-oDiv.offsetLeft;           disY=pos.y-oDiv.offsetTop;           document.onmousemove=function(ev)             /*由于要防止鼠标滑动太快跑出div，这里应该用document.           因为触发onmousemove时要重新获取鼠标的坐标，不能使用父函数上的pos.x和pos.y，所以必须写var oEvent=ev||event;var pos=getPos(oEvent);*/           {             var oEvent=ev||event;             var pos=getPos(oEvent);             //防止div跑出可视框             var l=pos.x-disX;             var t=pos.y-disY;             if(l<0)             {              l=0;             }             else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)             {              l=document.documentElement.clientWidth-oDiv.offsetWidth;             }             if(t<0)             {              t=0;             }             else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)             {              t=document.documentElement.clientHeight-oDiv.offsetHeight;             }             oBox.style.left=l+'px';             oBox.style.top=t+'px';           }           document.onmouseup=function(ev)           {              oDiv.style.left=oBox.offsetLeft+'px';              oDiv.style.top=oBox.offsetTop+'px';              document.body.removeChild(oBox); //删除当前box              document.onmousemove=null; //将move清除              document.onmouseup=null;           }           return false;  //火狐的bug，要阻止默认事件        }  }  </script></head><body>  <div id="div1"></div></body></html>

0 0

JS 事件基础 边框拖拽

JS 事件基础边框拖拽