今日のお昼の空き時間に、ドラッグパズルを書きました.いい感じです(ジグソーパズル)

ゲームを再開します.

    //       
    let tds = document.querySelectorAll('td');
    //            
    let tr1 = document.querySelector('#tr1');
    let tr2 = document.querySelector('#tr2');
    let tr3 = document.querySelector('#tr3');
    //            
    let btnStart = document.querySelector('#btnStart');
    let btnReset = document.querySelector('#btnReset');

    //          ，      
    tr1.ondragover = tr2.ondragover = tr3.ondragover = function (ev) {
        ev.preventDefault();
    }

    tr1.ondrop = tr2.ondrop = tr3.ondrop = function (ev) {
        ev.preventDefault();
        //          ，             。
        let className = ev.dataTransfer.getData("class");
        //         
        let dragImg = document.getElementsByClassName(className)[0];
        //             。        。
        let dragImgNextElement = dragImg.nextElementSibling;
        //              。  tr
        let dragImgParent = dragImg.parentElement;
        //              tr
        let targetParent = ev.target.parentElement;
        // dragImgParent.id === targetParent.id                 
        // dragImgNextElement               
        // dragImgNextElement.className === ev.target.className                        。
        if (dragImgParent.id === targetParent.id && dragImgNextElement && dragImgNextElement.className === ev.target.className) {
            //               。
            this.insertBefore(ev.target, dragImg);
        } else { //                 
            //               。
            this.insertBefore(dragImg, ev.target);
        }

        //                     。
        dragImgParent.insertBefore(ev.target, dragImgNextElement);

        //       。
        if (success()) {
            alert("      ");
        }
    }

    //       ，    td      。           。
    let arrImg = ['img0', 'img1', 'img2', 'img3', 'img4', 'img5', 'img6', 'img7', 'img8'];
    function randomImg() {
        //  arrImg  。
        arrImg.sort(function () {
            return Math.random() > 0.5 ? -1 : 1;
        })
        for (let i = 0; i < tds.length; i++) {
            const td = tds[i];
            //   td       
            td.removeAttribute('class');
            // td.className = "";
            // td.classList.remove(`img${i}`)
            //         ，      “  ”  。
            td.setAttribute('class', arrImg[i]);
            //  td      。
            td.ondragstart = function (ev) {
                //            ，      。
                ev.dataTransfer.setData('class', ev.target.className)
            }
        }
    }
    //       ，     ，   td       ， :img0...img8
    randomImg();

    btnStart.addEventListener('click', function () {
        randomImg();
    })

    btnReset.addEventListener('click', function () {
        randomImg();
    })

    function success() {
        let result = false;
        //        
        let oldArr = ['img0', 'img1', 'img2', 'img3', 'img4', 'img5', 'img6', 'img7', 'img8'];
        //      td class   ，       。
        let tds = document.querySelectorAll('td');
        let newArr = Array.from(tds).map(function (td) {
            return td.className;
        })
        //            。           。
        result = equal(newArr, oldArr);

        return result;
    }

    function equal(arr1, arr2) {
        for (let i = 0; i < arr1.length; i++) {
            if (arr1[i] !== arr2[i]) {
                return false;
            }
        }
        return true;
    }

/CSSスタイル!(物事を複雑に考えないでください.実は簡単です.)*{margin:0;padding:0;border-box;
.box｛width:550 px;magin:0 aut;｝
.box table{width:540 px;magin:0 atot;
box table td{width:168 px;height:168 px;background-mage:url(…/ll.jpg);background-repeat:no-repeat;
box table td.img 0｛background-position:0;｝.box table td.img 1｛background-position:-168 px 0;｝.box table td td.img 2｛background-position:-336 px 0;｝.box.box tablblblblblblblblblble ttttttttttttttdddddttttttttttd.baggggggggggggggggp.baggggggggp.baggp.baggggp.baggggggp-3.baggg｝.box table td.img 5{background-position:-336 px-168 px].box table td.img 6{background-position:0-336 px].box table td.img 7{background-position:-168 px-336 px;}.box table td.img 8{background-position:-336 px-336 px].