JavaScript 手动排列方块

最新推荐文章于 2021-06-05 06:55:45 发布

じоνё靁〃

最新推荐文章于 2021-06-05 06:55:45 发布

阅读量219

点赞数

分类专栏： JavaScript、CSS、HTML

本文链接：https://blog.csdn.net/jingliuting/article/details/88934073

版权

JavaScript、CSS、HTML 专栏收录该内容

38 篇文章 10 订阅

订阅专栏

JavaScript 手动排列方块

<!DOCTYPE html>
<html>

<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;
        }

        .box {
            width: 100px;
            height: 150px;
            background-color: lightgreen;
            border: 1px solid black;
            margin: 1px;
            float: left;
            font-size: 36px;
            font-weight: 700;
            color: white;
            line-height: 100px;
            text-align: center;
        }

        .fake-box {
            width: 100px;
            height: 150px;
            background-color: silver;
            border: 1px solid black;
            margin: 1px;
            float: left;
            font-size: 36px;
            font-weight: 700;
            color: white;
            line-height: 100px;
            text-align: center;
            position: absolute;
            opacity:0.5;
            display: none;
        }

        .box.active {
            background-color: lightsalmon;
        }
        .box.big{
            width:204px;
            height:304px;
            background-color: silver;
            border: 1px solid black;
            margin: 1px;
            float: left;
            font-size: 36px;
            font-weight: 700;
            color: white;
            line-height: 100px;
            text-align: center;
        }
    </style>


</head>

<body>

    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box active">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
    <div class="box b1">10</div>
    <div class="box">11</div>
    <div class="box">12</div>
    <div class="box">13</div>
    <div class="box">14</div>
    <div class="box">15</div>
    <div class="box">16</div>
    <div class="box">17</div>
    <div class="box">18</div>
    <div class="box">19</div>
    <div class="box">20</div>
    <div class="box">21</div>
    <div class="box big">22</div>
    <div class="box">23</div>
    <div class="box">24</div>
    <div class="box">25</div>
    <div class="box">26</div>
    <div class="box">27</div>
    <div class="box">28</div>
    <div class="box">29</div>
    <div class="box">30</div>
    <div class="box">31</div>
    <div class="box">32</div>
    <div class="box">33</div>
    <div class="box">34</div>
    <div class="box big">35</div>
    <div class="box">36</div>
    <div class="box">37</div>
    <div class="box">38</div>
    <div class="box">39</div>
    <div class="box">40</div>
    <div class="box">41</div>
    <div class="box">42</div>
    <div class="box">43</div>
    <div class="box">44</div>
    <div class="box">45</div>
    <div class="box">46</div>
    <div class="box">47</div>
    <div class="box big">48</div>
    <div class="box">49</div>
    <div class="box">50</div>
</body>

<script>
    var offset = 10;
    var boxs = document.querySelectorAll('.box');
    var fakeBox = document.createElement('div');
    fakeBox.className = 'fake-box';
    document.body.appendChild(fakeBox);

    var touchBox = null;

    for (var i = 0; i < boxs.length; i++) {
        boxs[i].onmousedown = function (e) {
            touchBox = this;
            touchBox.classList.add('active');
            fakeBox.top = this.offsetTop;
            fakeBox.left = this.offsetLeft;
            fakeBox.pagex = e.pageX;
            fakeBox.pagey = e.pageY;
            fakeBox.style.display = "block";
            fakeBox.style.top = this.offsetTop + 'px';
            fakeBox.style.left = this.offsetLeft  + 'px';
        }
    }

    document.addEventListener('mouseup',docMouseUp);
    document.addEventListener('mousemove',docMouseMove);

    function docMouseUp(e) {
        if (touchBox) {
            fakeBox.style.display = 'none';
            touchBox.classList.remove('active');
            touchBox = null;
        }
    }

    function docMouseMove(e) {
        if (touchBox) {
            fakeBox.style.top = e.pageY - offset  + 'px';
            fakeBox.style.left = e.pageX - offset  + 'px';
            fakeBox.style.top = fakeBox.top + e.pageY - fakeBox.pagey + 'px';
            fakeBox.style.left = fakeBox.left + e.pageX - fakeBox.pagex + 'px';

            for (var i = 0; i < boxs.length; i++) {
                if (touchBox != boxs[i]) {
                    if (e.pageY >= boxs[i].offsetTop && e.pageX >= boxs[i].offsetLeft && e.pageY <= boxs[i].offsetTop + boxs[i].offsetHeight && e.pageX <= boxs[i].offsetLeft + boxs[i].offsetWidth) {
                         console.log(boxs[i].previousSibling);
                        if(boxs[i].previousElementSibling != null && boxs[i].previousElementSibling.classList.contains("active")){
                            document.body.insertBefore(touchBox,boxs[i].nextSibling);
                        }else{
                            document.body.insertBefore(touchBox,boxs[i]);
                        }

                    }
                }
            }
        }
    }
</script>

</html>

じоνё靁〃

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 手动排列方块

JavaScript 手动排列方块<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...
复制链接

扫一扫

专栏目录