Web前端中实现一个拖动效果

发布时间：2021-05-06

# Web前端中实现一个拖动效果

在原生客户端开发中，窗口拖动是一个比较常用的操作。今天把这个效果在网页客户端中实现以下，文章记录一下效果。

## 分析梳理

拖动操作主要分为三部分：第一，对着需要拖动的元素按下鼠标，获取要拖动物体的位置；第二，滑动鼠标，注意在滑动鼠标的时候，鼠标一直是处于按下状态的并且元素应该是随着鼠标一起移动；第三，到达目标位置，松开鼠标。

## 实现

首先，拿到要拖动的物体，并注册鼠标按下事件。当鼠标按下时，开始监听页面的鼠标滑动事件，拿到实时位置坐标。再监听鼠标弹起事件，用来移除之前注册的页面事件，防止物体一直跟随无法停止。

```html
<div id="container">container</div>
```
Js代码如下
```javascript
const container = document.querySelector('div#container');
let disX = 0,
    disY = 0;
container.addEventListener('mousedown', ev => {
    disX = ev.clientX - container.offsetLeft;
    disY = ev.clientY - container.offsetTop;
    document.addEventListener('mousemove', mov);
    document.addEventListener('mouseup', up);
})

function mov(ev) {
    var ev = ev || event;
    container.style.left = ev.clientX - disX + 'px';
    container.style.top = ev.clientY - disY + 'px';
}

function up(ev) {
    document.removeEventListener('mousemove', mov);
    document.removeEventListener('mouseup', up);
    container.classList.remove('mov');
}
```
有兴趣可以自己试一试不注销事件监听会有什么效果。