js 拖拽方块

最新推荐文章于 2023-11-20 09:23:15 发布

A-Select °

最新推荐文章于 2023-11-20 09:23:15 发布

阅读量287

点赞数 1

本文链接：https://blog.csdn.net/weixin_45959504/article/details/105307365

版权

本文介绍了如何使用JavaScript实现拖拽方块的功能。关键点包括利用event.clientX和event.clientY获取鼠标位置，event.offsetX和event.offsetY确定元素相对位置，以及通过Element.getBoundingClientRect()方法获取元素的边界信息，实现元素的动态拖动效果。

摘要由CSDN通过智能技术生成

示图(有兴趣的可以拖拽下试试)：
在这里插入图片描述

<!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>
        .div1 {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
        }
        .div0{
            width:600px;
            height:600px;
            border:1px solid #000;
            position:relative;
            left:100px;
            top:100px;
        }
    </style>
</head>

<body>
        <div class="div0">
            <div class="div1"></div>
            <div class="div1"></div>
            <div class="div1"></div>
            <div class="div1"></div>
            <div class="div1"></div>
            <div class="div1"></div>
            <div class="div1"></div>
            <div class="div1"></div>
        </div>
    <script>
    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;
            }
        } 
    </script>
</body>

</html>

event.clientX、event.clientY

鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

event.offsetX、event.offsetY

鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。

Element.getBoundingClientRect()

方法返回元素的大小及其相对于视口的位置

A-Select °

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫