0
279
Views¿Cómo hacer que múltiples elementos se arrastren y suelten?
Lo que necesito es hacer que los 3 elementos (boca, ojo izquierdo, ojo derecho) se puedan arrastrar y soltar en el div con el fondo (cara recortada). Después de soltar cada elemento, aparece un texto.
Lo que estoy tratando de lograr 
Las imágenes arrastrables tienen el mismo tamaño que el fondo. He intentado algo pero realmente no he llegado a ninguna parte:
<!DOCTYPE HTML> <html> <head> <style> #div1 { width: 1554px; height: 874px; border: 1px solid #aaaaaa; z-index: 1; } #drag1 { width: 1554px; height: 874px; z-index: 2; } #drag2 { width: 1554px; height: 874px; z-index: 3; } #drag3 { width: 1554px; height: 874px; z-index: 4; } </style> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" style="background-image: url('https://blondtrickster.com/wp-content/uploads/2021/12/BACKGROUND.png');" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img id="drag1" src="https://blondtrickster.com/wp-content/uploads/2021/12/SUU.png" draggable="true" ondragstart="drag(event)"> <img id="drag2" src="https://blondtrickster.com/wp-content/uploads/2021/12/SILM_VASAK.png" draggable="true" ondragstart="drag(event)"> <img id="drag3" src="https://blondtrickster.com/wp-content/uploads/2021/12/SILM_PAREM.png" draggable="true" ondragstart="drag(event)"> </body> </html>La ayuda sería muy apreciada, ya que soy un principiante total.
·
Juan Pablo Isaza
1 answers
Answer question0
El problema está en las reglas de CSS. En este momento, cuando agrega un elemento secundario, la segunda IMG se coloca debajo de la primera, por lo que debe asegurarse de que todos los elementos de la IMG estén apilados uno sobre el otro. Hice esto configurando
"position: absolute; top: 0; left: 0"en cada imagen.
CSS completo:
html, body { margin: 0; padding: 0; } #div1 { width: 1554px; height: 874px; border: 1px solid #aaaaaa; z-index: 1; } #div1 #drag1 { position: absolute; top: 0; left: 0; width: 1554px; height: 874px; z-index: 2; } #div1 #drag2 { position: absolute; top: 0; left: 0; width: 1554px; height: 874px; z-index: 3; } #div1 #drag3 { position: absolute; top: 0; left: 0; width: 1554px; height: 874px; z-index: 4; }Esto es lo que conseguí:
·
Juan Pablo Isaza
Report
Answer question