原生js实现鼠标按下鼠标拉动元素移动效果

蛋蛋的老公

已于 2022-04-21 10:51:11 修改

阅读量1.6k

点赞数

分类专栏： html 文章标签： css js

于 2021-06-08 14:10:38 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_51499232/article/details/117700636

版权

html 专栏收录该内容

3 篇文章

订阅专栏

原生js实现鼠标按下鼠标拉动元素移动效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
    <title>move</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            cursor: move;
            top: 100px;
            left: 100px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="box" id="box"></div>
    </div>
    <script>
        let box = document.getElementById('box')
        //必须有按下和松开两个过程
        box.onclick = function () {
            //console.log("box被点击了")
        }
        //鼠标按下就触发的函数
        box.onmousedown = function (e) {
            console.log(e)
            console.log('在box上按下鼠标了')
            //鼠标按下时，相对box的位置(ofx,ofy)
            let ofx = e.offsetX
            let ofy = e.offsetY
            document.onmousemove = function (e) {
                //left
                let left = e.pageX - ofx
                if (left <= 0) {
                    left = 0
                }
                let maxLeft = window.innerWidth - box.offsetWidth
                if (left > maxLeft) {
                    left = maxLeft
                }
                //top
                let top = e.pageY - ofy
                if (top <= 0) {
                    top = 0
                }
                let maxTop = window.innerHeight - box.offsetHeight
                if (top > maxTop) {
                    top = maxTop
                }
                //设置一下元素的top和left
                box.style.left = left + 'px'
                box.style.top = top + 'px'
            }
            //重置onmousemove事件
            document.onmouseup = function () {
                document.onmousemove = ""
            }
        }
    </script>
</body>

</html>