¡Esta es una revisión vieja del documento!
Para explicar como funciona drag & drop, vamos a usar el siguiente ejemplo
<!DOCTYPE HTML> <html> <head> <style> .destino { width: 350px; height: 70px; border: 1px solid #aaaaaa; } </style> <script> function onDragOver(ev) { ev.preventDefault(); } function onDragStart(ev) { var element=ev.target; var data=element.innerText; ev.dataTransfer.setData("text", data); } function onDrop(ev) { ev.preventDefault(); var element=ev.target; var data = ev.dataTransfer.getData("text"); element.innerText=data; } </script> </head> <body> <p>Arrastra aquí el elemento a reparar:</p> <p class="destino" ondrop="onDrop(event)" ondragover="onDragOver(event)"></p> <br> <ul> <li draggable="true" ondragstart="onDragStart(event)">Disco duro</li> <li draggable="true" ondragstart="onDragStart(event)">Procesador</li> <li draggable="true" ondragstart="onDragStart(event)">Memoria RAM</li> <li draggable="true" ondragstart="onDragStart(event)">Placa base</li> </ul> </body> </html>
Crea un programa en JavaScript+HTML+CSS de un puzzle. En la parte superior estarán las 4 imágenes del puzzle sin colocar. En la parte imferior, habrá un cuadro con los 4 huecos a colocar.
Separa todo lo que puedas la parte visual de la lógica del puzzle
Para ello crea una clase Puzzle que no contenga nada de parte visual.