原生js实现拖拽元素

Andrew#

已于 2023-12-15 22:19:09 修改

阅读量40

点赞数

文章标签： javascript 前端 vue.js

于 2023-12-15 22:13:44 首次发布

本文链接：https://blog.csdn.net/qq_29894575/article/details/135026144

版权

原生js实现拖拽元素

主要用到了几个js事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box" style="width: 100px;height: 100px;background-color:red;position:absolute"></div>
</body>
<script>
    let box = document.querySelector("#box")
    let body = document
    box.style.left = box.offsetLeft + "px"
    box.style.top = box.offsetTop + "px"
    box.addEventListener("mousedown", draw1)
    box.addEventListener("mouseup", draw2)
    let distanceX = 0
    let distanceY = 0

    function draw1(e) {
        console.log('按下')
        body.addEventListener("mousemove", draw3)
        distanceX = e.clientX - parseInt(box.style.left.split("px")[0])
        distanceY = e.clientY - parseInt(box.style.top.split("px")[0])
    }

    function draw2(e) {
        console.log("松起")
        body.removeEventListener("mousemove", draw3)
    }

    function draw3(e) {
        console.log("鼠标X：" + e.clientX, "鼠标y：" + e.clientY)
        box.style.left = e.clientX - distanceX + "px"
        box.style.top = e.clientY - distanceY + "px"
    }
</script>
</html>