js 实现 div 在页面上任意拖动功能

• #js

一、效果演示

二、代码实现

1.

写一个 div，给一个宽高和背景颜色，关键是 position: fixed，之后拖动 div 时通过 js 改变这个 div 的 left 和 top 来实现 div 拖动效果。

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        cursor: move;
        /* 设置 fixed 布局方式，之后拖动时通过 js 改变 left 和 top 值变更 div 位置  */
        position: fixed;
    }
</style>

<div class="box"></div>

2.

添加 mousedown 事件，鼠标在 div 上按下的时候，需要记录当前鼠标位置距离 div 左边以及上边的距离。

const box = document.querySelector('.box')

box.addEventListener('mousedown', e => {
    const offsetLeft = e.offsetX
    const offsetTop = e.offsetY
})

3.

document 元素添加 mousemove 事件，鼠标在页面上拖动 div 时，(e.clientX, e.clientY) 是鼠标相对于浏览器窗口的实时位置坐标，减去鼠标相对于 div 的坐标值，就是 div 左上角的坐标值，将这个坐标值设置为 div 的 css 样式中的 left 和 top 值。此时，div 就可以在页面上任意拖动了。

这里需要注意：鼠标相对于 div 的坐标值，要使用 mousedown 事件里面的 e.offsetX 和 e.offsetY，不能使用 mousemove 事件里面的 e.offsetX 和 e.offsetY。

const box = document.querySelector('.box')

box.addEventListener('mousedown', e => {
    const offsetLeft = e.offsetX
    const offsetTop = e.offsetY

    document.onmousemove = e => {
        // div.box 左边坐标值 = 鼠标点击位置距离浏览器左边距离 - 鼠标点击位置距离 div.box 左边距离
        const left = e.clientX - offsetLeft
        const top = e.clientY - offsetTop

        box.style.left = left + 'px'
        box.style.top = top + 'px'  
    }
})

4.

document 元素添加 mouseup 事件，鼠标松开时，将 mousemove 事件和 mouseup 事件移除，防止鼠标松开之后，div 依然可以拖动。

document.onmouseup = e => {
    document.onmouseup = null
    document.onmousemove = null
}

完整代码如下：

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        cursor: move;
        /* 设置 fixed 布局方式，之后拖动时通过 js 改变 left 和 top 值变更 div 位置  */
        position: fixed;
    }
</style>

<div class="box"></div>

<script>
    const box = document.querySelector('.box')

    box.addEventListener('mousedown', e => {
        const offsetLeft = e.offsetX
        const offsetTop = e.offsetY

        document.onmousemove = e => {
            // div.box 左边坐标值 = 鼠标点击位置距离浏览器左边距离 - 鼠标点击位置距离 div.box 左边距离
            const left = e.clientX - offsetLeft
            const top = e.clientY - offsetTop

            box.style.left = left + 'px'
            box.style.top = top + 'px'  
        }

        document.onmouseup = e => {
            document.onmouseup = null
            document.onmousemove = null
        }
    })
</script>

三、实际应用

工作中遇到过一个需求：弹窗需要可以在页面上任意拖动。

实现原理和 div 任意拖动是一模一样的，可以直接复制上面代码进行修改。

↶ 返回首页