用js实现可拖动的div

最新推荐文章于 2024-04-16 19:44:59 发布

zzh1918

最新推荐文章于 2024-04-16 19:44:59 发布

阅读量1.6k

点赞数 4

分类专栏： javascript 文章标签：可拖动的div

本文链接：https://blog.csdn.net/qq_37860930/article/details/95189252

版权

javascript 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

用js实现可拖动的div，其实逻辑很简单，计算鼠标的移动距离然后设置盒子的位置即可
看看效果
在这里插入图片描述
源码


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

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

        body {
            position: relative;
            width: 100vw;
            height: 100vh;
        }

        .box {
            position: absolute;
            width: 400px;
            height: 400px;
            background: skyblue;
        }
    </style>
</head>

<body>
    <div class="box" id='box'>
    </div>

    <script>
        const box = document.getElementById('box')
        let isDown = false
        let mouse = {}
        box.onmousedown = (e) => {
            isDown = true
            box.style.cursor = 'move'
            //保存初始位置
            mouse = {
                startX: e.clientX,
                startY: e.clientY,
                offsetLeft: box.offsetLeft,
                offsetTop: box.offsetTop,
            }
        }

        box.onmousemove = (e) => {
            if (!isDown) {
                return
            }
            //计算偏移位置
            let offsetLeft = mouse.offsetLeft + e.clientX - mouse.startX
            let offsetTop = mouse.offsetTop + e.clientY - mouse.startY

            //设置偏移距离的范围[0,window.innerWidth - 400]
            offsetLeft = Math.max(0, Math.min(offsetLeft, window.innerWidth - 400))
            offsetTop = Math.max(0, Math.min(offsetTop, window.innerHeight - 400))
            
            box.style.left = offsetLeft + 'px';
            box.style.top = offsetTop + 'px';

        }
        //当鼠标滑的太快时，容易移出box，所以在window上监听此事件
        window.onmouseup = () => {
            isDown = false
            box.style.cursor = 'default'
            mouse = null
        }
    </script>

</body>

</html>

zzh1918

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
用js实现可拖动的div

用js实现可拖动的div，其实逻辑很简单，计算鼠标的移动距离然后设置盒子的位置即可看看效果源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width...
复制链接

扫一扫