js实现对话框拖拽

@suancai

于 2024-07-17 16:10:02 发布

阅读量337

点赞数 3

文章标签： javascript 开发语言 vue.js

本文链接：https://blog.csdn.net/qq_53659725/article/details/140492728

版权

1.获取鼠标位置

pageX和pageY获取的是鼠标指针距离文档（HTML）的左上角距离，不会随着滚动条滚动而改变；
clientX和clientY获取的是鼠标指针距离可视窗口(不包括上面的地址栏和滑动条)的距离，会随着滚动条滚动而改变；

2.元素的位置

clientWidth = width+左右padding
clientHeigh = height + 上下padding
clientX : 是用来获取鼠标点击的位置距离当前窗口左边的距离
clientY: 是用来获取鼠标点击的位置距离当前窗口上边的距离

offsetWidth: 用来获取当前拖拽元素自身的宽度（ width + 左右padding + 左右boder）
offsetHeight:用来获取当前拖拽元素自身的高度（ height+ 上下padding + 上下boder）
offsetTop：元素到offsetParent顶部的距离（当前元素顶部距离最近父元素顶部的距离）
scrollTop: 内容层顶部到可视区域顶部的距离
scrollLeft: 内容层左端到可视区域左端的距离
document.documentElement.clientHeight ：屏幕的可视高度
document.documentElement.clientWidth：屏幕的可视高度

3.代码实现

html部分：

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

css部分：

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

js部分：

window.onload = function (){
  var target = document.getElementById('div1')
  var disX = 0;
  var disY = 0;

  target.onmousedown = function (ev){
    var oEvent = ev||event;
    disX =  oEvent.clientX - target.offsetLeft;
    disY =  oEvent.clientY - target.offsetTop;
    document.onmousemove = function (ev){
      var oEvent = ev||event;
      var left = oEvent.clientX - disX;
      var top = oEvent.clientY - disY;
      //控制拖拽框在屏幕可视区域内拖拽
      if(left < 0) {
        left = 0;
      } else if(left > document.documentElement.clientWidth - target.offsetWidth){
        left = document.documentElement.clientWidth - target.offsetWidth;
      }
      if(top < 0) {
        top = 0;
      } else if(top > document.documentElement.clientHeight - target.offsetHeight){
        top = document.documentElement.clientHeight - target.offsetHeight;
      }
      target.style.left = left + 'px';
      target.style.top  = top + 'px';
    };
    //防止在火狐浏览器下拖拽时会出现的两次阴影的效果
    document.onmouseup = function (){
      document.onmousemove = null;
      document.onmouseup = null;
    }
  } 
}