Natives JS zum Erzielen eines Puzzle-Effekts

//Führen Sie die ursprüngliche Funktion aus init();
Funktion init() {
    //Einen Fragmentcontainer erstellen var frag = document.createDocumentFragment();
    Dokument.Body.Style.Margin = "0px";
    //Erstelle den linken Bildcontainer var ul=createE("ul",{
        Breite: "260px",
        Höhe: "400px",
        Hintergrundbild: "url(./img/3.jpg)",
        borderRight: "1px durchgezogen #000",
        Rahmen unten: "1px durchgehend #000",
        Listenstil: "keine",
        Polsterung: "0px",
        Rand: "0px",
        Deckkraft: ".3",
        Position: "absolut"
    })
    //Erstelle li, um den Rahmen im Bild anzuzeigen var li=createE("li",{
        Breite: "51px",
        Höhe: "79px",
        borderLeft: "1px durchgezogen #000",
        Rahmen oben: "1px durchgehend #000",
        Polsterung: "0px",
        Rand: "0px",
        float: "links"
    })
    //Schleife, kopiere li und füge es in ul ein for (i = 0; i < 25; i++) {
        ul.appendChild(li.cloneNode(false));
    }
    //ul in den Fragmentcontainer einfügen frag.appendChild(ul);
    //Erstelle den Bildcontainer rechts. Da img relativ zum Body positioniert werden muss, kann der übergeordnete Container keine Positionierungsattribute haben var div = createE("div",{
        Breite: "302px",
        Höhe: "302px",
        Rahmen: "1px durchgezogen #000",
        Rand links: "400px"
    })
    //Bild-Tags erstellen für (var j = 0; j < 5; j++) {
        für (var k = 0; k < 5; k++) {
            var img = createE("img",{
                Breite: "52px",
                Höhe: "80px",
                Position: "absolut",
                links: Math.floor(Math.random() * 250) + 400 + "px",
                oben: Math.floor(Math.random() * 220) + "px"
            })
            img.src = "./img/img" + j + "-" + k + ".jpg";
            //Bild hört auf MouseHandler-Ereignisse img.addEventListener("mousedown", mouseHandler);
            div.appendChild(img);
        }
    }
    //Div in den Fragmentcontainer einfügen und dann Frag in den Textkörper einfügen frag.appendChild(div);
    Dokument.body.appendChild(frag);
}
//Mausereignisfunktion mouseHandler(e) {
    Schalter (e.Typ) {
        Fall „mousedown“:
            // Lösche den Standardeffekt des Verschiebens des Bildes nach dem Klicken auf e.preventDefault();
            Konsole.log(diese.src.match(/img\/img(.*)\.jpg/))
            //Nummer im Bildpfad abrufen und korrekte Positionskoordinaten des Bildes berechnen var imgSrc = this.src.match(/img\/img(.*)\.jpg/)[1].split("-");
            var rightL=imgSrc[1]*52;
            var rightTop=imgSrc[0]*80;
            //Wenn das Bild richtig platziert ist, direkt rausspringen if (this.style.left===rightL+"px" && this.style.top===rightTop+"px") return;
            //Setze den Z-Index des aktuellen Bildes auf das Maximum this.style.zIndex = "999";
            //e.offsetX, e.offsetY und das aktuell angeklickte Bildobjekt im Dokument speichern document.x = e.offsetX;
            Dokument.y = e.offsetY;
            Dokument.elem = dies;
            Dokument.rightL=rightL;
            Dokument.rightTop=rightTop;
            //Dokument wartet auf Mousemove- und Mouseup-Ereignisse document.addEventListener("mousemove", mouseHandler);
            document.addEventListener("mouseup", Maus-Handler);
            brechen;
        Fall "Mausbewegung":
            //Automatischer Adsorptionsabstand var gap = 20;
            //Stellen Sie das aktuelle Bild so ein, dass es mit der Maus verschoben wird let x=e.clientX - this.x;
            sei y = e.clientY - dies.y;
            dieses.elem.style.left = x + "px";
            dieses.elem.style.top = y + "px";
            //Wenn die Positionskoordinaten des aktuellen Bildes innerhalb eines bestimmten Bereichs liegen, lass es automatisch adsorbieren, wenn (x>=this.rightL-gap &&x<=this.rightL+gap&&
                y>=diese.rechteOberseite-Lücke &&y<=diese.rechteOberseite+Lücke) {
                dies.elem.style.left = dies.rightL + "px";
                dies.elem.style.top = dies.rightTop + "px";
            }
            brechen;
        Fall "mouseup":
            //Wenn die Maus losgelassen wird, reduziere den Z-Index des aktuellen Bildes this.elem.style.zIndex = "10";
            //Nach dem Loslassen der Maus die Mousemove- und Mouseup-Ereignisse des Dokuments entfernen, die Daten löschen und Inhaltsverlust verhindern. this.removeEventListener("mousemove", mouseHandler);
            this.removeEventListener("mouseup", Maus-Handler);
            dies.elem=null;
            brechen;
    }
}
//Erstelle eine Tag-Funktion createE(elem,styleData){
    var elem = document.createElement(elem);
    für (var prep in styleData) {
        elem.style[prep]=styleData[prep];
    }
    Rücklaufelement;
}