元素拖拽小游戏

关忆北_
于 2024-10-09 14:41:59 发布
阅读量18
点赞数 1
分类专栏：经验记载文章标签： javascript 前端 html
本文链接：https://blog.csdn.net/notagoodwriter/article/details/142786571
版权
经验记载专栏收录该内容
30 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bigBox {
            width: 300px;
            height: 300px;
            position: relative;
            margin: 100px auto;
            font-size: 20px;
            font-weight: 600;
            line-height: 100px;
            text-align: center;
            color: #fff;
        }

        .bigBox>div {
            border: 1px solid #000;
            /* 禁止选中 */
            user-select: none;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }

        .one {
            width: 100px;
            height: 100px;
            background: #0ba7ce;
            cursor: pointer;
            position: absolute;
            left: 0;
            top: 0;
        }

        .two {
            width: 100px;
            height: 100px;
            background: #afdd31;
            cursor: pointer;
            position: absolute;
            left: 100px;
            top: 0;
        }

        .three {
            width: 100px;
            height: 100px;
            background: #5ace37;
            cursor: pointer;
            position: absolute;
            left: 200px;
            top: 0;
        }

        .four {
            width: 100px;
            height: 100px;
            background: #2feee4;
            cursor: pointer;
            position: absolute;
            left: 0;
            top: 100px;
        }

        .five {
            width: 100px;
            height: 100px;
            background: #727de2;
            cursor: pointer;
            position: absolute;
            left: 100px;
            top: 100px;
        }

        .six {
            width: 100px;
            height: 100px;
            background: #e4a16a;
            cursor: pointer;
            position: absolute;
            left: 200px;
            top: 100px;
        }

        .seven {
            width: 100px;
            height: 100px;
            background: #c5286a;
            cursor: pointer;
            position: absolute;
            left: 0;
            top: 200px;
        }

        .eight {
            width: 100px;
            height: 100px;
            background: #05b45d;
            cursor: pointer;
            position: absolute;
            left: 100px;
            top: 200px;
        }

        .night {
            width: 100px;
            height: 100px;
            background: #7a481f;
            cursor: pointer;
            position: absolute;
            left: 200px;
            top: 200px;
        }
    </style>
</head>

<body>
    <div class="bigBox">
        <div class="one" id="one">1</div>
        <div class="two" id="two">2</div>
        <div class="three" id="three">3</div>
        <div class="four" id="four">4</div>
        <div class="five" id="five">5</div>
        <div class="six" id="six">6</div>
        <div class="seven" id="seven">7</div>
        <div class="eight" id="eight">8</div>
        <div class="night" id="night">9</div>
    </div>

    <script>
        document.title = '元素拖拽'

        // 获取元素
        let one = document.getElementById('one');
        let two = document.getElementById('two');
        let three = document.getElementById('three');
        let four = document.getElementById('four');
        let five = document.getElementById('five');
        let six = document.getElementById('six');
        let seven = document.getElementById('seven');
        let eight = document.getElementById('eight');
        let night = document.getElementById('night');
        // 将元素放入数组中
        let arr = [one, two, three, four, five, six, seven, eight, night]
        let idx = 1
        // 拖拽函数
        function boxDrag(ele) {
            let x = 0;
            let y = 0;
            ele.onmousedown = (e) => {
                let disX = e.clientX - ele.offsetLeft;
                let disY = e.clientY - ele.offsetTop;
                x = e.clientX - disX;
                y = e.clientY - disY;

                // 鼠标按下时，元素置顶
                let timer = setInterval(() => {
                    idx += 10
                    ele.style.zIndex = 1000 + idx
                }, 100)

                document.onmousemove = (e) => {
                    // 鼠标移动时，元素跟随鼠标移动
                    let nowx = e.clientX - disX;
                    let nowy = e.clientY - disY;
                    ele.style.left = nowx + 'px';
                    ele.style.top = nowy + 'px';
                }
                document.onmouseup = (e) => {
                    // 储存元素
                    let newArr = []
                    // 碰撞坐标互换
                    arr.forEach((item, index) => {
                        if (item !== ele) {
                            // 碰撞面积检测
                            if (boxCollision(ele, item)) {
                                newArr.push({
                                    index,
                                    area: boxCollision(ele, item),
                                    left: item.offsetLeft,
                                    top: item.offsetTop,
                                })

                            }
                        }
                    })
                    if (newArr.length) {
                        // 碰撞面积排序
                        newArr.sort((a, b) => {
                            return b.area - a.area;
                        })
                        // 碰撞面积最大的元素
                        let maxArea = newArr[0];
                        let maxAreaIndex = maxArea.index;
                        ele.style.left = maxArea.left + 'px';
                        ele.style.top = maxArea.top + 'px';
                        // 碰撞面积最大的元素回归原位
                        arr[maxAreaIndex].style.left = x + 'px';
                        arr[maxAreaIndex].style.top = y + 'px';
                    } else {
                        // 鼠标抬起时，元素回归原位
                        ele.style.left = x + 'px';
                        ele.style.top = y + 'px';
                    }
                    clearInterval(timer);
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
            }
        }
        boxDrag(one);
        boxDrag(two);
        boxDrag(three);
        boxDrag(four);
        boxDrag(five);
        boxDrag(six);
        boxDrag(seven);
        boxDrag(eight);
        boxDrag(night);


        // 碰撞检测
        function boxCollision(ele1, ele2) {
            let x1 = ele1.offsetLeft;
            let y1 = ele1.offsetTop;
            let x2 = ele2.offsetLeft;
            let y2 = ele2.offsetTop;
            let w1 = ele1.offsetWidth;
            let h1 = ele1.offsetHeight;
            let w2 = ele2.offsetWidth;
            let h2 = ele2.offsetHeight;
            if (x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1) {
                return false;
            } else {
                // 计算碰撞面积
                let area1 = (x1 + w1 < x2 + w2 ? x1 + w1 : x2 + w2) - (x1 > x2 ? x1 : x2);
                let area2 = (y1 + h1 < y2 + h2 ? y1 + h1 : y2 + h2) - (y1 > y2 ? y1 : y2);
                let area = area1 * area2;

                return area;
            }
        }

    </script>
</body>

</html>