实现dom拖动效果思路分析

慰尘
169 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

今天来记录一个亲自实现dom拖拽效果的效果。场景如下：在页面内有个红色div，鼠标点击后红色div能够随着鼠标拖动而丝滑的移动，鼠标松开div则固定到移动位置

属性概念

实现效果之前有几个属性概念需要了解并区分清除：clientY,pageY,screenYoffsetY。上一篇文章介绍鼠标事件时，对回调参数已做了截图与标注

clientY：指以页面可视区域左上角为坐标原点的垂直距离，不受页面滚动影响 screenY：指浏览器页面左上角为坐标原点的垂直距离（注：指电脑自身显示器而非拓展显示器） pageY：指以页面左上角为坐标原点的垂直距离，受页面滚动影响 offsetY：指以自身左上角为坐标系原点的垂直距离

image.png

原理分析

移动dom采用绝对定位的方式，top和left属性动态赋值,dom的移动距离即鼠标滑动是移动的距离。即top=dom y坐标 + 鼠标移动距离Y，left= dom x坐标 + 鼠标移动距离X

1、获取目标元素，计算出鼠标相对dom元素的位置

let odiv = e.target; 
let disX = e.clientX - odiv.offsetLeft;
let disY = e.clientY - odiv.offsetTop;

2、鼠标移动后获取鼠标当前位置，用鼠标的位置减去鼠标相对元素的位置，得到元素的位置

let left = e.clientX - disX;
let top = e.clientY - disY;

3、移动dom

odiv.style.left = left + 'px';
odiv.style.top = top + 'px';

4、鼠标抬起后对鼠标移动和鼠标抬起事件重置

document.onmousemove = null;
document.onmouseup = null;

完整代码如下

//css
body {
    position: relative;
}

.box {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 40px;
    height: 30px;
    background: #42b983;
}

//html+js
<body>
<div class="box"></div>
<script>
  const dom = document.querySelector('.box')
  dom.addEventListener('mousedown', e => {
    let odiv = e.target;//获取目标元素

    //算出鼠标相对元素的位置
    let disX = e.clientX - odiv.offsetLeft;
    let disY = e.clientY - odiv.offsetTop;
    document.onmousemove = (e) => {       //鼠标按下并移动的事件
      //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
      let left = e.clientX - disX;
      let top = e.clientY - disY;

      //移动当前元素
      odiv.style.left = left + 'px';
      odiv.style.top = top + 'px';
    };
    document.onmouseup = (e) => {
      document.onmousemove = null;
      document.onmouseup = null;
    };
  }, false)
</script>
</body>
avatar
文章
阅读
粉丝