Editar: ¡Funciona para elementos html pero no para archivos!
Aquí está el código que tengo:
<!DOCTYPE html> <html> <style> html, body { margin: 0; padding: 0; width: 100%; height: 100%; } body { display: flex; align-items: center; justify-content: center; } #drop_zone { border: 5px solid blue; width: 200px; height: 100px; } </style> <script> function dropHandler(ev) { console.log('File(s) dropped'); // Prevent default behavior (Prevent file from being opened) ev.preventDefault(); } function dragOverHandler(ev) { console.log('File(s) in drop zone'); // Prevent default behavior (Prevent file from being opened) ev.preventDefault(); } function dragEnterHandler(ev) { console.log('Entered drop zone'); // Prevent default behavior (Prevent file from being opened) ev.preventDefault(); } function dragLeaveHandler(ev) { console.log('Left drop zone'); // Prevent default behavior (Prevent file from being opened) ev.preventDefault(); } </script> <body> <div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);" ondragenter="dragEnterHandler(event);" ondragleave="dragLeaveHandler(event)"> <p>Drag one or more files to this Drop Zone ...</p> </div> </body> </html> Todos los demás eventos de caída se activan excepto ondrop .
