html div拖拽移动

2021 年 06 月 29 日

1290字数

![效果图](http://blog.11dz.cn/usr/uploads/2021/06/2687512634.gif)

```html

<!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 = `150px`;
    divEle.style.height = `150px`;
    divEle.style.position = `absolute`;
    divEle.style.left = `0`;
    divEle.style.backgroundColor = `gray`;

//添加事件：鼠标按下
    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>

```

最后修改：2021 年 06 月 29 日