鼠标拖拽窗口效果（不允许拖出屏幕的可视区域）

来源：互联网发布：平面设计网络课程编辑：程序博客网时间：2024/05/19 14:16

这里写图片描述

html样式

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

css样式

#div1 {  width: 200px;  height: 200px;  background: #deb887;  position: absolute;}

JS样式

window.onload = function (){  var oDiv = document.getElementById('div1')  var disX = 0;  var disY = 0;  oDiv.onmousedown = function (ev){    var oEvent = ev||event;    disX =  oEvent.clientX - oDiv.offsetLeft;    disY =  oEvent.clientY - oDiv.offsetTop;    document.onmousemove = function (ev){      var oEvent = ev||event;      var l = oEvent.clientX - disX;      var t = oEvent.clientY - 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;      }      oDiv.style.left = l+ 'px';      oDiv.style.top  = t+ 'px';    };    //此处是为了防止在火狐浏览器下拖拽时会出现的两次阴影的效果，此处代码可以禁用    document.onmouseup = function (){      document.onmousemove = null;      document.onmouseup = null;    }  } }

其实原理就是实时计算区域框距离左右屏幕之间的距离，通过鼠标的点击、拖动、移除事件来对区域框进行操作。在不同的条件下作出不同的判断就可以了～

阅读全文

0 0