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

最新推荐文章于 2023-05-31 16:46:28 发布

冯冯墨墨

最新推荐文章于 2023-05-31 16:46:28 发布

阅读量7k

点赞数 2

分类专栏： javascript 文章标签： html css javascript 鼠标拖拽

本文链接：https://blog.csdn.net/qq_33072593/article/details/77567908

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这里写图片描述

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;
    }
  } 
}