HTML+JavaScript实现鼠标按住拖拽标签功能（代码注释详解）

最新推荐文章于 2022-11-26 11:46:20 发布

jojoarare

最新推荐文章于 2022-11-26 11:46:20 发布

阅读量1.2k

点赞数

分类专栏： js html 编程基础文章标签： javascript 定位 html

本文链接：https://blog.csdn.net/jojoarare/article/details/109213137

版权

js 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

编程基础

7 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用HTML、CSS和JavaScript实现元素的拖拽功能。通过设置样式和监听鼠标事件，动态调整div元素的位置，允许用户在页面上自由移动div。关键在于捕获鼠标按下时的位置并结合鼠标移动事件更新元素坐标。这个示例展示了前端开发中常见交互功能的实现方法。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽功能</title>
</head>
<body>
    <div></div>
    <script>
    
    //获取标签
    let divEle = document.getElementsByTagName("div")[0];

    //对标签设置简单样式
    divEle.style.width = `200px`;
    divEle.style.height = `200px`;
    divEle.style.position = `absolute`;
    divEle.style.left = `0`;
    divEle.style.backgroundColor = `skyblue`;

    //添加事件：鼠标按下
    divEle.addEventListener("mousedown", function (e) {
    //设置事件对象
    let event1 = e || window.event;

    //鼠标移动事件调用函数
    let yidong = function (e) {
        //设置时间对象
        let event = e || window.event;

        //当鼠标移动时  设置div的定位位置（这里是重点）
        //问1: 为什么yidong函数要写在事件内
        //问2：为什么要用event1.offsetX 而不是 event.offsetX
        divEle.style.left = event.clientX-event1.offsetX + `px`;
        divEle.style.top = event.clientY-event1.offsetY + `px`;
    }

    //鼠标按下时div自身添加边框
    this.style.border = `2px solid red`;

    //当按下时  对document设置鼠标移动事件
    document.addEventListener("mousemove", yidong);
    
    //鼠标抬起事件
    divEle.addEventListener("mouseup", function (e) {
  
        //删除鼠标移动事件
        document.removeEventListener("mousemove", yidong);
        //取消边框
        this.style.border = `none`;
    })
})
    </script>
</body>
</html>