Html笔记()蜘蛛纸牌之卡牌吸附

目的

蜘蛛纸牌中要实现牌组的连接,就需要吸附功能。从效果图中可以看出我们把一张牌拖到另一张卡牌上的时候,它会自动吸附过去并且左对齐。

效果

代码

html 复制代码
<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #2b2b2b;
            position: relative;
            //这很关键,如果没有这个左对齐不了
            margin: 0;
        }

        .card {
            /*设置卡牌的外观*/
            width: 150px;
            height: 200px;
            background-color: #00ffcc;
            border-radius: 10px;
            /*为卡牌中间的图案设置格式*/
            font-size: 100px;
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
            /*方便左上角和右下角的数字定位*/
            position: absolute;
            /*避免选择到文本*/
            user-select: none;
            border: 1px solid black;
        }

        /*设置卡牌两个对角的数字格式*/
        .pos-TL {
            position: absolute;
            font-size: 20px;
            top: 5px;
            left: 5px;
        }

        .pos-BR {
            position: absolute;
            font-size: 20px;
            bottom: 5px;
            right: 5px;
            transform: rotateZ(180deg);
        }
    </style>
</head>

<body>
    <!--把卡牌里的元素都放到卡牌这个容器里,对卡牌的动画会传到卡牌元素里-->
    <div class="card" id="card1">♠️
        <div class="card-num pos-TL">6</div>
        <div class="card-num pos-BR">6</div>
    </div>
    <div class="card" id="card2">♠️
        <div class="card-num pos-TL">3</div>
        <div class="card-num pos-BR">3</div>
    </div>



    <script>
        let offsetX, offsetY, isDragging = false;
        const card2 = document.getElementById("card2");
        const card1 = document.getElementById("card1");
        card2.addEventListener("mousedown", (e) => {
            isDragging = true;
            offsetX = e.clientX - card2.getBoundingClientRect().left;
            offsetY = e.clientY - card2.getBoundingClientRect().top;
        })

        document.addEventListener("mousemove", (e) => {
            if (isDragging) {
                card2.style.left = `${e.clientX - offsetX}px`;
                card2.style.top = `${e.clientY - offsetY}px`;
            }
        })
        document.addEventListener("mouseup", () => {
            isDragging = false;
            absorbing()
        })

		//吸附函数
        function absorbing( ) {
           
            const firstCard = card1.getBoundingClientRect();
            const lastCard = card2.getBoundingClientRect();
            //判断是否大面积重合
            if (firstCard.right > lastCard.left && firstCard.left < lastCard.right && firstCard.bottom > lastCard.top && firstCard.top < firstCard.bottom) {
                card2.style.left = `${firstCard.left}px`;
            }
        }
    </script>
</body>

</html>

总结

  • 先说最重要的就是左对齐,如果你没有在body里面设置margin:0;,那么可能出现这样的情况
    无论怎么样对无法让两张卡片左对齐,这就是margin带来的影响,我们需要将其设为0。
  • 判断两个元素重叠用.style.left还是用.getBoundingClientrect().left
    选择.getBoundingClientrect().left因为后者是基于窗口的位置来计算的,而前者是基于父元素的相对位置计算的。所以前者更加准确,而后者会根据父元素的变化导致预期外的变化。
  • 不能修改DOMrect的属性,因为只读。
相关推荐
柯西梦回黄鹤楼2 小时前
lmms-eval--微调实战笔记
笔记
珠峰下的沙砾9 小时前
Vue3 里 CSS 深度作用选择器 :global
前端·javascript·css
航Hang*9 小时前
WEBSTORM前端 —— 第2章:CSS —— 第3节:背景属性与显示模式
前端·css·css3·html5·webstorm
wuhen_n9 小时前
CSS元素动画篇:基于当前位置的变换动画(一)
前端·css·html·css3·html5
一只小风华~11 小时前
Web前端开发:CSS Float(浮动)与 Positioning(定位)
前端·css·html·html5·web
努力奋斗的小杨12 小时前
学习MySQL的第十二天
数据库·笔记·学习·mysql·navicat
枫叶200013 小时前
OceanBase数据库-学习笔记1-概论
数据库·笔记·学习·oceanbase
一点.点13 小时前
李沐动手深度学习(pycharm中运行笔记)——04.数据预处理
pytorch·笔记·python·深度学习·pycharm·动手深度学习
一点.点13 小时前
李沐动手深度学习(pycharm中运行笔记)——07.自动求导
pytorch·笔记·python·深度学习·pycharm·动手深度学习