相信很多初学者，对九宫格也有所疑惑，那么本次分享就对初学者进行解惑！

 

HTML代码

        <ul id="box">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>

CSS代码

            * {
                margin: 0;
                padding: 0;
            }
            html {
                overflow: hidden;
            }
            ul {
                list-style: none;
            }
            #box {
                position: relative;
                margin: 20px auto;
                width: 640px;
                height: 640px;
                border: 1px solid #eee;
            }
            #box li {
                position: absolute;
                width: 200px;
                height: 200px;
                line-height: 200px;
                text-align: center;
                font-size: 40px;
                font-weight: bold;
                background: #eee;
            }
            #box .active {
                z-index: 1;
                color: #fff;
                background: blue;
            }

JS代码

思路：

1、先布局（找规律），然后用JS利用定位实现布局

2、拖拽原理（onmousedown,onmousemove,onmouseup）　

3、拖拽的过程，物体的offsetLeft和offsetTop一直在变化

4、俩个物体交换的时候需要达到一定的条件，并且要交换下标。

5、一个函数中的this在其他函数中使用会影响，所以可定义that(自定义)，将this赋值给that，然后使用that。

            window.onload = function () {
                var oBox = document.getElementById('box');
                var aLi  = oBox.children;

                
                for(var i = 0; i < aLi.length; i++) {
                    // 布局
                    aLi[i].style.left = 210 * (i % 3) + 10 + 'px';
                    aLi[i].style.top  = 210 * Math.floor(i / 3) + 10 + 'px';


                    // 添加拖拽功能
                    aLi[i].index = i;
                    aLi[i].onmousedown = function (ev) {
                        var e = ev || window.event;
                        var iX = e.clientX - this.offsetLeft;
                        var iY = e.clientY - this.offsetTop;
                        if(this.setCapture) {
                            this.setCapture();
                        }
                        var oThat = this;

                        // 添加class名称
                        this.className = 'active';
                        document.onmousemove = function (ev) {
                            var e = ev || window.event;
                            var iL = e.clientX - iX;
                            var iT = e.clientY - iY;

                            oThat.style.left = iL + 'px';
                            oThat.style.top  = iT + 'px';



                            // 交换位置的条件
                            for(var j = 0; j < aLi.length; j++) {
                                if(
                                        oThat != aLi[j]
                                    &&  oThat.offsetLeft + oThat.offsetWidth > aLi[j].offsetLeft + aLi[j].offsetWidth / 2
                                    &&  oThat.offsetTop + oThat.offsetHeight > aLi[j].offsetTop + aLi[j].offsetHeight / 2
                                    &&  oThat.offsetLeft < aLi[j].offsetLeft + aLi[j].offsetWidth / 2
                                    &&  oThat.offsetTop < aLi[j].offsetTop + aLi[j].offsetHeight / 2
                                ) {
                                    var iCurIndex = oThat.index;
                                    // 交换位置
                                    aLi[j].style.left = 210 * (iCurIndex % 3) + 10 + 'px';
                                    aLi[j].style.top  = 210 * Math.floor(iCurIndex / 3) + 10 + 'px';
                                    aLi[j].style.transform = 'rotate(360deg)';

                                    // 交换下标
                                    oThat.index = aLi[j].index;
                                    aLi[j].index = iCurIndex;
                                    break;
                                }
                            }
                        };
                        document.onmouseup = function () {
                            document.onmousemove = null;
                            document.onmouseup = null;

                            if(oThat.releaseCapture) {
                                oThat.releaseCapture();
                            }

                            // 去掉class名称
                            oThat.className = '';

                            // 重置当前拖拽元素的位置
                            oThat.style.left = 210 * (oThat.index % 3) + 10 + 'px';
                            oThat.style.top  = 210 * Math.floor(oThat.index / 3) + 10 + 'px';
                        };

                        return false;
                    };
                }

 

版权声明：本文为MaShuai666原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/MaShuai666/p/8395638.html