拖拽元素

最新推荐文章于 2024-09-24 11:55:49 发布

V________

最新推荐文章于 2024-09-24 11:55:49 发布

阅读量101

点赞数

分类专栏：练习文章标签： javascript css html5

本文链接：https://blog.csdn.net/V________/article/details/112483106

版权

练习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

let divEle = document.querySelector("div");
divEle.style.width = 300 + "px";
divEle.style.height = 300 + "px";
divEle.style.backgroundColor = "skyblue";
divEle.style.position = "fixed";
divEle.style.left = 0 + "px";
divEle.style.top = 0 + "px";
divEle.style.boxSizing = "border-box";

divEle.addEventListener("mousedown", e => {
    let event = e || window.event;
    //鼠标标在节点的位置
    let divML = event.offsetX;
    let divMT = event.offsetY;
    divEle.style.border = "10px solid red";
    //鼠标移动的位置
    document.addEventListener("mousemove", divMove);

    divEle.addEventListener("mouseup", e => {
        divEle.style.border = "";
        document.removeEventListener("mousemove", divMove);
    });

    function divMove(e) {
        let event = e || window.event;
        //获取节点的尺寸
        // let divWidth = divEle.clientWidth;
        // let divHeight = divEle.clientHeight;
        //获取节点的尺寸(padding和border)
        let divWidth = divEle.offsetWidth;
        let divHeight = divEle.offsetHeight;
        //设置节点位置
        divEle.style.left = event.clientX - divML + "px";
        divEle.style.top = event.clientY - divMT + "px";

        //获取当前节点的位置
        let divLeft = parseInt(divEle.style.left);
        let divTop = parseInt(divEle.style.top);
        //获取鼠标可以移动的最大值
        let moveXMax = window.innerWidth - divWidth;
        let moveYMax = window.innerHeight - divHeight;
        if (divLeft <= 0) {
            divEle.style.left = 0 + "px";
        }
        if (divTop <= 0) {
            divEle.style.top = 0 + "px";
        }
        if (divLeft >= moveXMax) {
            divEle.style.left = moveXMax + "px";
        }
        if (divTop >= moveYMax) {
            divEle.style.top = moveYMax + "px";
        }
    }
});

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div></div>
    <script src="./index.js"></script>
</body>

</html>