拖拽的几种实现方法

最新推荐文章于 2023-11-28 11:58:47 发布

Yee:)

最新推荐文章于 2023-11-28 11:58:47 发布

阅读量1.7k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44383477/article/details/103929822

版权

单个元素在body内移动最简单办法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
    }
    </style>
</head>
<body>
    <div id="div1"></div>
    <script>
        // 单个元素在body内移动
        var div1 = document.querySelector("#div1")
        div1.onmousedown = function (e1) {
            //  console.log(e1)  这里e1是div
            document.onmousemove = function (e2) { // 这里e2是document
                console.log(e2.clientX) // 鼠标点击与浏览器左上角的距离
                console.log(e1.offsetX) // 鼠标点击距离自身左上角的距离
                div1.style.left = e2.clientX - e1.offsetX + "px";
                div1.style.top = e2.clientY - e1.offsetY + "px";
            }
            document.onmouseup = function (e3) {
                document.onmousemove = null;
            }
        }
    </script>
</body>
</html>

单个元素在body内移动简单办法 html部分同上

<script>
    var div1 = document.querySelector("#div1")
    div1.addEventListener("mousedown", mouseDownHandler); // 添加鼠标按下时事件
    var x, y;
    function mouseDownHandler(e) {
        x = e.offsetX; //记录鼠标按时距离自己左上角的坐标
        y = e.offsetY;
        document.addEventListener("mousemove", mouseMoveHandler); // 移动时触发
        document.addEventListener("mouseup", mouseUpHandler); // 抬起时触发
    }
    function mouseMoveHandler(e) {
        div1.style.left = e.clientX - x + "px"; 
        div1.style.top = e.clientY - y + "px";
    }
    function mouseUpHandler(e) {
        document.removeEventListener("mousemove", mouseMoveHandler);
        document.removeEventListener("mouseup", mouseUpHandler);
    }
</script>

多个元素在body内拖拽简单办法

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <script>
        var divs = document.getElementsByTagName("div");
        for (var i = 0; i < divs.length; i++) {
            divs[i].addEventListener("mousedown", mouseDownHandler); // 给所有div添加鼠标按下的事件
        }

        function mouseDownHandler(e) {
            // this是div 在点击事件的回调函数中 this指向被侦听的对象
            document.elem = this; // 给document加一个elem属性 标记自己
            document.x = e.offsetX; // 给document加点下时距离自身元素的坐标
            document.y = e.offsetY;
            document.addEventListener("mousemove", mouseMoveHandler);
            document.addEventListener("mouseup", mouseUpHandler);
        }

        function mouseMoveHandler(e) {
            // 这里是侦听的document this是document
            this.elem.style.left = e.clientX - this.x + "px"; // 刚才把点击的元素和坐标存在document的属性内 所以可以拿到
            this.elem.style.top = e.clientY - this.y + "px";
        }

        function mouseUpHandler(e) {
            this.removeEventListener("mousemove", mouseMoveHandler);
            this.removeEventListener("mouseup", mouseUpHandler);
        }
    </script>
</body>

</html>

多个元素在某个div内实现拖拽

var divs = document.querySelectorAll(".div1");
for (var i = 0; i < divs.length; i++) {
    divs[i].addEventListener("mousedown", mouseHandler)
}

function mouseHandler(e) {
    switch (e.type) {
        case "mousedown":
            e.preventDefault();
            document.elem = this;
            document.x = e.offsetX;
            document.y = e.offsetY;
            document.addEventListener("mousemove", mouseHandler);
            document.addEventListener("mouseup", mouseHandler);
            break;
        case "mousemove":
            var rect = this.elem.parentElement.getBoundingClientRect();
            this.elem.style.left = e.clientX - rect.x - this.x + "px";
            this.elem.style.top = e.clientY - rect.y - this.y + "px";
            if (this.elem.offsetLeft < 0) this.elem.style.left = "0px";
            if (this.elem.offsetTop < 0) this.elem.style.top = "0px";
            if (this.elem.offsetLeft > rect.width - this.elem.offsetWidth) this.elem.style.left = rect.width -
                this.elem.offsetWidth + "px";
            if (this.elem.offsetTop > rect.height - this.elem.offsetHeight) this.elem.style.top = rect.height -
                this.elem.offsetHeight + "px";
            break;
        case "mouseup":
            this.removeEventListener("mousemove", mouseHandler);
            this.removeEventListener("mouseup", mouseHandler);
            break;
    }
}

封装出来

var yee = (function(){
    return {
         // 单个或多个拖拽元素:)
        dragOn: function (elem, bool) {
            // this Utils对象
            elem.self = this;
            elem.bool = bool;
            elem.addEventListener("mousedown", this.mouseHandler);
        },
        dragOff: function (elem) {
            elem.removeEventListener("mousedown", this.mouseHandler);
        },
        mouseHandler: function (e) {
            switch (e.type) {
                case "mousedown":
                    // this   elem被拖拽的元素
                    e.preventDefault();
                    document.elem = this;
                    document.x = e.offsetX;
                    document.y = e.offsetY;
                    document.addEventListener("mousemove", this.self.mouseHandler);
                    document.addEventListener("mouseup", this.self.mouseHandler);
                    break;
                case "mousemove":
                    // this document
                    var rect = this.elem.parentElement.getBoundingClientRect();
                    this.elem.style.left = e.clientX - rect.x - this.x + "px";
                    this.elem.style.top = e.clientY - rect.y - this.y + "px";
                    if (!this.elem.bool) return;
                    if (this.elem.offsetLeft < 0) this.elem.style.left = "0px";
                    if (this.elem.offsetTop < 0) this.elem.style.top = "0px";
                    if (this.elem.offsetLeft > rect.width - this.elem.offsetWidth) this.elem.style.left = rect.width - this.elem.offsetWidth + "px";
                    if (this.elem.offsetTop > rect.height - this.elem.offsetHeight) this.elem.style.top = rect.height - this.elem.offsetHeight + "px";
                    break;
                case "mouseup":
                    // this document
                    this.removeEventListener("mousemove", this.elem.self.mouseHandler);
                    this.removeEventListener("mouseup", this.elem.self.mouseHandler);
                    break;
            }
        },
    }
})()