Tengo un div donde simplemente quiero escuchar el evento dragend pero, por alguna razón, no funciona. Quiero iniciar sesión en la consola cuando el cuadro azul se cae dentro del rectángulo, pero no da nada...
Aquí está el código:
<!DOCTYPE html> <html> <head> <style> #a { width: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa; } #drag1 { background-color: blue; width: 100px; height: 70px; } </style> </head> <body> <p>Drag the blue box into the rectangle and wait for the console log:</p> <div id="a"></div> <br /> <div id="drag1" draggable="true"></div> </body> <script> dropArea = document.getElementById("a"); dragger = document.getElementById("drag1"); dropArea.addEventListener("dragend", () => { console.log("Hello....."); }); </script> </html>El evento Dragend se inicia desde el arrastre del elemento cuando termina de arrastrarlo.
debe colocar el evento dragend en el elemento de arrastre y no en el área de colocación
cambio
dropArea.addEventListener("dragend", () => {por
dragger.addEventListener("dragend", () => { dropArea = document.getElementById("a"); dragger = document.getElementById("drag1"); dragger.addEventListener("dragend", () => { console.log("Here....."); }); <!DOCTYPE html> <html> <head> <style> #a { width: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa; } #drag1 { background-color: blue; width: 100px; height: 70px; } </style> </head> <body> <p>Drag the blue box into the rectangle and wait for the console log:</p> <div id="a"></div> <br /> <div id="drag1" draggable="true"></div> </body> </html>