El código específico es el siguiente:
<!--El código es el siguiente. La parte inferior muestra los 9 sectores de imagen de 250*250 que utilicé para las pruebas--><!DOCTYPE html><html><head> <meta charset=utf-8> <title>arrastrar. Arrastre</title> <style> .box{ float: left } img{ width: 150px height:150px } #puzzle{ font-size: 0; margen:80px auto; relleno: 5px; ancho: 460px; </style></head><body> <div id=puzzle> <div class=box><img <div class=box><img <div class =cuadro><img <div clase=cuadro><img <div clase=cuadro><img <div clase=cuadro><img <div clase=cuadro><img <div clase=cuadro><img <div class=box><img </div> <script> var image = document.getElementsByTagName(img); var box = document.getElementsByClassName(box); var source = var nowImageBox; ; var entoncesImagen for(let i=0;i<image.length;i++){ fuente = imagen+i+.jpg; imagen[i].setAttribute(src,fuente); imagen[i].onmousedown = function(){ nowImage = this; nowImageBox = this.parentNode } box[i].ondragover = function(event){ event.preventDefault( ); //Elimina el comportamiento predeterminado del evento ondragover, que no puede colocar datos o elementos en otros elementos de forma predeterminada} box[i].ondrop = function(event){ thenImage = cuadro[i].childNodes[0]; cuadro[i].appendChild(nowImage); nowImageBox.appendChild(thenImage); ResumirLo anterior es el rompecabezas implementado por la función de arrastrar y soltar HTML5 introducida por el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!