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

it2025-06-20 9

<!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>

问2：因为如果需要让鼠标固定在：鼠标按下去的时候鼠标在div内的位置那么就需要获得鼠标按下去时，鼠标距离div顶部、左侧的距离，所以需要用event1

问1：为什么移动函数写在事件内因为如果需要用到事件内声明的变量（event1）如果将函数写在外面的话，没有办法拿到事件内声明的值。并且只有鼠标按下的时候才能移动div的位置，所以移动事件也需要写在事件内，并且鼠标松开时要删除它。

最新回复(0)