Der spezifische Code lautet wie folgt:
<!--Der Code lautet wie folgt. Unten werden die 9 250*250 Bildausschnitte angezeigt, die ich zum Testen verwendet habe.--><!DOCTYPE html><html><head> <meta charset=utf-8> <title>drag Ziehen</title> <style> .box{ float: left; } img{ width: 150px } #puzzle{ font-size: 0; margin:80px auto; padding: 5px; width: 460px; } </style></head><body> <div class=box><img <div class=box><img <div class =box><img <div class=box><img <div class=box><img <div class=box><img <div class=box><img <div class=box><img <div class=box><img </div> var image = document.getElementsByTagName(img); var box = document.getElementsByClassName(box); var nowImageBox; ; var thenImage; for(let i=0;i<image.length;i++){ source = picture+i+.jpg; image[i].setAttribute(src,source); image[i].onmousedown = function(){ nowImage = this; nowImageBox = this.parentNode } box[i].ondragover = function(event){ event.preventDefault( ); //Entferne das Standardverhalten des Ondragover-Ereignisses, das standardmäßig keine Daten oder Elemente in anderen Elementen platzieren kann} box[i].ondrop = function(event){ thenImage = box[i].childNodes[0]; box[i].appendChild(nowImageBox.appendChild(thenImage); ZusammenfassenDas obige ist das Puzzle, das durch die vom Editor eingeführte HTML5-Drag-and-Drop-Funktion implementiert wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!