原生JS生成九宮格

2022-06-28 18:03:34
原生JS生成九宮格圖片並且實現圖片互換，供大家參考，具體內容如下
解題思路

涉及知識點，請
1、熟練利用js做出html樣式
2、對onmousedown,onmousemove,onmouseup等事件熟練組合運用
3、熟練掌握事件物件domobj.offsetLeft,domobj.offsetTop,domobj.offsetWidth，domobj.offsetHeight的知識點
4、瞭解事件 e.clientX,e.clientY,e.offsetX,e.offsetY,e.pageX,e.pageY的知識點
5、理解克隆節點的原理
<!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>
        body {
            margin: 0;
            padding: 0;
        }
        #wrap {
            position: relative;
        }
        #wrap div {
            width: 100px;
            height: 100px;
            position: absolute;
            text-align: center;
            line-height: 100px;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div id="wrap">
    </div>
    <script>
 
        // 1.獲取warp
        var wrap = document.querySelector('#wrap')
        
           //2.建立3行3列9個div。並且給每個div新增隨機顏色
           //以下為表示構建思路，利用雙重for迴圈
           //(0,0)   (110,0)   (220,0)
           //(0,110)(110,110)(220,110)
           //(0,220)(110,220)(220,220) 
        var count = 0
        var chart = [1, 2, 3, 4, 5, 6, 7, 8, 9]
        for (var i = 0; i < 3; i++) {//行
            for (var j = 0; j < 3; j++) {//列
                var odiv = document.createElement('div');
                wrap.appendChild(odiv);
                //設定top和left值，注意行對應的是odiv.offsetHeight，列對應的是odiv.offsetWidth
                odiv.style.top = i * (odiv.offsetHeight + 10) + 'px';
                odiv.style.left = j * (odiv.offsetWidth + 10) + 'px';
                //獲取隨機顏色，用的rgb隨機獲取方式
                odiv.style.backgroundColor = 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256)
                 + ','+ Math.floor(Math.random() * 256) + ')';
                //給每個圖片標上號碼，i,j最大值為3，但是共執行了9次，設定變數count=0,count++作為陣列的索引把對應的內容新增到div上
                odiv.innerText = chart[count++];
            }
        }
    
        //3.獲取迴圈中建立的9個div,並新增點選滑鼠事件
        var items = wrap.children
        for (var i = 0; i < items.length; i++) {
            items[i].onmousedown = function (e) {
                var evt = e || event;
                //獲取滑鼠點下相對於事件源的偏移量
                var x = evt.offsetX;
                var y = evt.offsetY;
                //this指向滑鼠點選要拖拽的物件
                var dragitem = this;
                //克隆點選拖拽的物件。注意此時解釋可能有點抽象，但是解題關鍵，克隆物件後相當於除了上述9個事件，
                //又生成了一個隱藏的和點選的div相同的物件，把克隆的物件替換掉剛點選時的即將拖拽的物件，此時拖
                //拽物件被隱藏，脫離父元素，此時需要把拖拽的物件新增到父元素的最後，使其重新為10個子元素，否則拖拽的元素無法顯示。
                var clonenode = dragitem.cloneNode();
                wrap.replaceChild(clonenode, dragitem);
                //把拖拽的節點放到wrap的最後
                wrap.appendChild(dragitem);
                //拖拽時把拖拽的層次向上調一下，否則會被覆蓋。
                dragitem.style.zIndex = 1;

                //4，此時滑鼠點選時需要準備的工作已經做完了，因為拖拽滑鼠時，拖拽物件時再檔案上移動的，此時滑鼠移動的物件應為document
                document.onmousemove = function (e) {
                    var evt = e || event;
                    //獲取拖拽物件跟隨滑鼠時在檔案中的定位，事件源據檔案的邊距-點選時距離事件源的偏移=定位的座標
                    var x1 = evt.clientX - x;
                    var y1 = evt.clientY - y;
                    dragitem.style.left = x1 + 'px';
                    dragitem.style.top = y1 + 'px';
                    //取消預設行為
                    return false;v
                }
                //5，有拖拽物件的定位，此時需要判斷滑鼠鬆開時距離哪個建立的哪個div距離最近，交換其距離。上面提到，此時共建立了10個Div,
                //分別求出拖拽物件和其他10個div的距離傳到陣列中，找出最小值對應的索引，該索引對應的div即為距離最近的div,然後交換兩者的
                //位置（注意：觀察陣列，最後一個為0，且上面已經把拖拽物件放到最後，是自己和自己比，因此迴圈時減一即可忽略和自己的比較）
                document.onmouseup = function () {
                    var arr = [];
                    //迴圈長度-1，忽略和自己的比較
                    for (var j = 0; j < items.length - 1; j++) {
                    //利用勾股定理求距離，並傳入陣列
                        var disx = dragitem.offsetLeft - items[j].offsetLeft;
                        var disy = dragitem.offsetTop - items[j].offsetTop;
                        var dissum = Math.sqrt(Math.pow(disx, 2) + Math.pow(disy, 2))
                        arr.push(dissum);
                    }
                    //利用展開符...展開陣列，用Math.min找出最小值，再用最小值去找出陣列對應索引
                    var min = Math.min(...arr);
                    var dex = arr.indexOf(min);
                    //把拖拽物件的定位換成距離最近div的距離
                    dragitem.style.left = items[dex].style.left;
                    dragitem.style.top = items[dex].style.top;
                    //然後把距離最近的div的定位換成此時克隆物件的定位（即原拖拽物件的定位）
                    items[dex].style.left = clonenode.style.left;
                    items[dex].style.top = clonenode.style.top;
                    //此時交換完畢，把克隆節點移除
                    wrap.removeChild(clonenode)
                    //移除事件並取消預設行為
                    document.onmousemove = '';
                    document.onmouseup = '';
                    return false;
                }
            }
        }
    </script>
</body>

</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。
原生JS生成九宮格

解題思路

熱門文章
