原生js实现拖拽功能

最新推荐文章于 2024-03-06 23:50:33 发布

英俊先生

最新推荐文章于 2024-03-06 23:50:33 发布

阅读量647

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_62889848/article/details/129078075

版权

一、写在前面

如果我们想要实现拖拽的功能，必须要知道三个事件：
1、onmousedown：鼠标按下事件
2、onmousemove：鼠标移动事件
3、onmouseup：鼠标抬起事件

二、实现思路

我们当左键点击时，需要记录当前的鼠标点击位置相对于该元素左上角的x，y坐标，
这里我们使用diffX和diffY来表示。然后我们移动时需要不断计算当前元素距离浏
览器左边和上边的距离。然后给元素进行赋值。当鼠标抬起时，然后取消鼠标移动事
件和鼠标抬起事件。

三、原生代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        #drag {
            width: 200px;
            height: 200px;
            background: red;
            cursor: pointer;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="drag"></div>
</body>
<script>

    window.onload = function () {
        //获取drag元素
        let drag = document.getElementById("drag")
        //当鼠标按下时
        drag.onmousedown = function (e) {
            //做到浏览器兼容
            e = e || window.event
            let diffX = e.clientX - drag.offsetLeft
            let diffY = e.clientY - drag.offsetTop
            //当拉着box移动时
            document.onmousemove = function (e) {
                // 浏览器兼容
                e = e || window.event
                let left = e.clientX - diffX
                let top = e.clientY - diffY

                if (left < 0) {
                    left = 0
                } else if (left > window.innerWidth - drag.offsetWidth) {
                    left = window.innerWidth - drag.offsetWidth
                }

                if (top < 0) {
                    top = 0
                } else if (top > window.innerHeight - drag.offsetHeight) {
                    top = window.innerHeight - drag.offsetHeight
                }


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

            // 当鼠标抬起时
            document.onmouseup = function (e) {
                this.onmousemove = null
                this.onmouseup = null
            }
        }
    }
</script>
</html>