Estoy creando una aplicación de arrastrar y soltar para la cual el usuario arrastra un archivo a un div. Cuando el archivo que se está arrastrando está sobre el div, el div se vuelve verde.
var dropzone = document.querySelector(".dropzone"); dropzone.ondragover = event => { event.target.classList.add("fileover"); }; .dropzone { border: 1px solid lightgray; padding: 2rem; margin: 2rem; border-radius: 10px; font-family: Arial; cursor: pointer; text-align: center; font-size: 0.8rem; } .fileover { background-color: green; } <input id="file" type="file" style="display: none"/> <label for="file"> <div class="dropzone" ondrop="event.preventDefault()">Drag and drop or select a file</div> </label> Pero digamos que el usuario decide no colocar el archivo en la zona de colocación y aleja el archivo de la zona de colocación. En ese caso, la zona de lanzamiento permanece verde. Entonces, ¿hay un evento que se activa cuando el archivo sale de la zona de colocación, entonces, la zona de colocación vuelve a ser blanca? ¿Algo así como ondragaway ?
Podrías usar ondragleave :
Tenga en cuenta que también reemplazo ondragover con ondragenter por coherencia.
var dropzone = document.querySelector(".dropzone"); dropzone.ondragenter = event => { event.target.classList.add("fileover"); }; dropzone.ondragleave = event => { event.target.classList.remove("fileover"); }; .dropzone { border: 1px solid lightgray; padding: 2rem; margin: 2rem; border-radius: 10px; font-family: Arial; cursor: pointer; text-align: center; font-size: 0.8rem; } .fileover { background-color: green; } <input id="file" type="file" style="display: none"/> <label for="file"> <div class="dropzone" ondrop="event.preventDefault()">Drag and drop or select a file</div> </label>