Estoy tratando de crear un contador de cartas visual. Básicamente, imágenes de tarjetas que se pueden mover a diferentes divisiones.
Empecé con el código de https://www.w3schools.com/html/html5_draganddrop.asp
Funciona bien, pero me deja con un problema: si una imagen se arrastra encima de otra, desaparece. Mirando el código, parece anidar dentro de la imagen a la que se arrastra.
Encontré varias páginas que describen problemas similares, pero no pude hacer que las soluciones propuestas funcionaran para mí.
En resumen, me gustaría que la imagen arrastrada se comportara como si se hubiera soltado junto a la imagen estática; incluso si se cae encima por error.
¡Gracias por adelantado!
<!DOCTYPE HTML> <html> <head> <style> #div1 { float: left; width: 200px; height: 335px; margin: 10px; padding: 10px; border: 1px solid black; background-color: aqua; } #div2, #div3 { float: right; width: 200px; height: 335px; margin: 10px; padding: 10px; border: 1px solid black; background-color: rgba(255, 0, 0, 0.548); } </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> <h2>Twilight Stuggle Card Tracker</h2> <p>Drag the image back and forth between the two div elements.</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <h2>USA</h2> <img src="imgeurope-scoring.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="90" height="126"> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="imgduck-and-cover.jpg" draggable="true" ondragstart="drag(event)" id="drag2" width="90" height="126"> </div> <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="imgduckpix.GIF" draggable="true" ondragstart="drag(event)" id="drag3" width="190" height="28"> <img src="imgfive-year-plan.jpg" draggable="true" ondragstart="drag(event)" id="drag4" width="105" height="147"> </div> </body> </html>Cuando suelta una imagen directamente sobre otro elemento de imagen, entonces ev.target será esa imagen. Así que vaya y verifique qué tipo de elemento tiene allí, y si es una imagen, vaya primero al elemento principal.
function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"), target = ev.target; if(target.nodeName == "IMG") { target = target.parentNode; } target.appendChild(document.getElementById(data)); }