如何用JS实现div的拖拽

最新推荐文章于 2023-11-21 14:45:58 发布

猿林新秀

最新推荐文章于 2023-11-21 14:45:58 发布

阅读量124

点赞数

分类专栏： JavaScript 文章标签： javascript js html5 css 前端

本文链接：https://blog.csdn.net/weixin_46021847/article/details/105422462

版权

JavaScript 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽小方块</title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background-color: crimson;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="div1" onmousedown="mouseDown()" style="left: 0;top: 0">
</div>

<script>
	//思路：利用div的绝对定位实现
    let div1 = document.getElementById('div1');//获取div的dom节点
    let offsetX;//鼠标点击位置到div左边的距离
    let offsetY;//鼠标点击位置到div上边的距离

    function mouseDown() {
        let event = arguments[0] || window.event;//获取事件对象
        console.log(event);
        offsetX = event.offsetX;//获取第一次点击时鼠标点击位置到div左边的距离
        offsetY = event.offsetY;//获取第一次点击时鼠标点击位置到div上边的距离
        document.onmousemove = function () {//鼠标移动是触发函数
            let event = arguments[0] || window.event;
            console.log(event);
            //根据鼠标到窗口的距离，减去鼠标和div初始时的相对位置，来确定div的坐标
            div1.style.top = event.clientY - offsetY + 'px';
            div1.style.left = event.clientX - offsetX + 'px';
        };
        document.onmouseup = function () {//鼠标抬起时解绑改变div位置的函数
            document.onmousemove = null
        }
    }
</script>
</body>
</html>

猿林新秀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何用JS实现div的拖拽

如何用JS实现div的拖拽<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拖拽小方块</title> <style> #div1 { width: 100px...
复制链接

扫一扫

专栏目录