パズル効果を実現するネイティブ js

//初期関数init()を実行します。
関数init() {
    //フラグメント コンテナーを作成します。var frag = document.createDocumentFragment();
    document.body.style.margin = "0px";
    // 左の画像コンテナを作成する var ul=createE("ul",{
        幅: "260px",
        高さ: "400px",
        背景画像: "url(./img/3.jpg)",
        borderRight: "1px 実線 #000",
        borderBottom: "1px 実線 #000",
        リストスタイル: "なし",
        パディング: "0px",
        マージン: "0px",
        不透明度: ".3",
        位置: 「絶対」
    })
    //画像に境界線を表示するための li を作成します var li=createE("li",{
        幅: "51px",
        高さ: "79px",
        borderLeft: "1px 実線 #000",
        borderTop: "1px 実線 #000",
        パディング: "0px",
        マージン: "0px",
        フロート: "左"
    })
    //ループし、li をコピーして ul に挿入します for (i = 0; i < 25; i++) {
        ul.appendChild(li.cloneNode(false));
    }
    //フラグメント コンテナーに ul を挿入します。frag.appendChild(ul);
    // 右側に画像コンテナを作成します。img は body に対して相対的に配置する必要があるため、その親コン​​テナには配置属性を設定できません var div = createE("div",{
        幅: "302px",
        高さ: "302px",
        境界線: "1px 実線 #000",
        左余白: "400px"
    })
    //画像タグを作成する for (var j = 0; j < 5; j++) {
        (var k = 0; k < 5; k++) の場合 {
            var img = createE("img",{
                幅: "52px",
                高さ: "80px",
                位置: "絶対"、
                左: Math.floor(Math.random() * 250) + 400 + "px",
                上: Math.floor(Math.random() * 220) + "px"
            })
            img.src = "./img/img" + j + "-" + k + ".jpg";
            //画像は mouseHandler イベントをリッスンします。img.addEventListener("mousedown", mouseHandler);
            div.appendChild(画像);
        }
    }
    // div をフラグメント コンテナーに挿入し、次に frag を body に挿入します。frag.appendChild(div);
    document.body.appendChild(フラグ);
}
//マウスイベント関数mouseHandler(e) {
    スイッチ (e.type) {
        ケース「マウスダウン」:
            // クリック後に画像を移動するデフォルトの効果をクリアします。e.preventDefault();
            console.log(this.src.match(/img\/img(.*)\.jpg/))
            //画像パス内の番号を取得し、画像の正しい位置座標を計算します。var imgSrc = this.src.match(/img\/img(.*)\.jpg/)[1].split("-");
            var rightL=imgSrc[1]*52;
            var rightTop=imgSrc[0]*80;
            //画像が正しく配置されている場合は、直接ジャンプします if (this.style.left===rightL+"px" && this.style.top===rightTop+"px") return;
            //現在の画像の Z インデックスを最大値に設定します。this.style.zIndex = "999";
            //e.offsetX、e.offsetY、および現在クリックされている画像オブジェクトをドキュメントに保存します。document.x = e.offsetX;
            ドキュメント.y = e.offsetY;
            ドキュメント.elem = これ;
            ドキュメントの右L = 右L;
            document.rightTop=右上;
            //ドキュメントは mousemove イベントと mouseup イベントをリッスンします。document.addEventListener("mousemove", mouseHandler);
            document.addEventListener("mouseup"、mouseHandler);
            壊す;
        ケース「マウス移動」:
            //自動吸着距離 var gap = 20;
            //現在の画像をマウスに合わせて移動するように設定します。let x=e.clientX - this.x;
            y = e.clientY - this.y とします。
            this.elem.style.left = x + "px";
            this.elem.style.top = y + "px";
            //現在の画像の位置座標が特定の範囲内にある場合、自動的に吸着させる if (x>=this.rightL-gap &&x<=this.rightL+gap&&
                y>=this.rightTop-gap &&y<=this.rightTop+gap) {
                this.elem.style.left = this.rightL + "px";
                this.elem.style.top = this.rightTop + "px";
            }
            壊す;
        ケース「マウスアップ」:
            //マウスが放されたら、現在の画像の Z インデックスを減らします。this.elem.style.zIndex = "10";
            //マウスを放した後、ドキュメントの mousemove イベントと mouseup イベントを削除し、データをクリアして、コンテンツの漏洩を防ぎます。this.removeEventListener("mousemove", mouseHandler);
            this.removeEventListener("mouseup", mouseHandler);
            this.elem=null;
            壊す;
    }
}
//タグを作成する function createE(elem,styleData){
    var elem = document.createElement(elem);
    for(var prep in styleData){
        elem.style[準備]=styleData[準備];
    }
    要素を返します。
}