简单实现可拖拽的div

最新推荐文章于 2023-11-30 08:39:27 发布

A孙大壮

最新推荐文章于 2023-11-30 08:39:27 发布

阅读量2.5k

点赞数 1

文章标签： css 前端 vue vue.js html

本文链接：https://blog.csdn.net/sunxiaobai1/article/details/127982792

版权

首先先写一个div 给上样式

<div class="my-div" @mousedown=arrowMove></div>

这里一定要给position：absolute 或者 fixed

.my-div {
    width: 200px;
    height: 200px;
    background-color: #003f88;
    border-radius: 10px;
    padding: 5px;
    position: absolute;
    z-index: 10;
}

然后给加上方法

arrowMove(e) {
            // 元素大小
            let elW = e.currentTarget.offsetWidth
            let elH = e.currentTarget.offsetHeight
            // 元素位置
            let elL = e.currentTarget.offsetLeft
            let elT = e.currentTarget.offsetTop
            // 鼠标位置
            let x = e.clientX
            let y = e.clientY
            // 窗口大小
            let w = window.innerWidth
            let h = window.innerHeight
            // 鼠标到元素左边距离
            let moveX = x - elL
            let moveY = y - elT
            let el = e.currentTarget
            document.onmousemove = function (e) {
                el.style.right = w - (e.clientX - moveX) - elW + 'px'
                el.style.bottom = h - (e.clientY - moveY) - elH + 'px'
            }
            document.onmouseup = function () {
                document.onmousemove = null
                document.onmouseup = null
            }
        },