HTML笔记()蜘蛛纸牌之卡牌拖拽

效果

代码

html 复制代码
<!DOCTYPE html>
<html>
    <head>
        <style>
            body{
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                background-color: #2b2b2b;
                position: relative;
            }
            .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;
            }
            /*设置卡牌两个对角的数字格式*/
            .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 id="card" class="card">♠️
            <div class="card-num pos-TL">6</div>
            <div class="card-num pos-BR">6</div>
        </div>
        <script>
            let offsetX, offsetY, isDragging = false;
            const card = document.getElementById("card");

            card.addEventListener("mousedown", (e) => {
                isDragging = true;
                const cardrect = card.getBoundingClientRect(); // 每次拖动开始时更新位置
                offsetX = e.clientX - cardrect.left;
                offsetY = e.clientY - cardrect.top;
            });

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

            document.addEventListener("mouseup", () => {
                isDragging = false;
            });
        </script>
    </body>
</html>

总结

  • const只能申明单个变量,否则报错
html 复制代码
<script>
	const offsetX,offsetY = false;//❌
	let offsetX,offsetY = false //✅
</script>
  • 不要实时获取的值赋给其他变量
html 复制代码
cardrect = card.getBoundingClientRect();\\之前写了这句,只会获得点击时候的鼠标位置,而无法获取到拖拽过程中的鼠标位置
  • 忘记在<div class = "card">里添加id="card"
  • 属性为absolute的元素的定位不是取决于离他最近的含有relative的父元素,而是取决于离他最近的还有position的父元素。所以我们的代码里既能让card相对body移动,又能让cardnum相对card进行定位。
相关推荐
gnip3 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
掘金安东尼5 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手9 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
Hilaku9 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
LuckySusu9 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu9 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu9 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu9 小时前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu9 小时前
【js篇】addEventListener()方法的参数和使用
前端·javascript
LuckySusu9 小时前
【js篇】深入理解 JavaScript 原型与原型链
前端·javascript