I am making a drag and drop application for which the user drags a file into a div. When the file that is being dragged is over the div, the div turns green.
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>But let's say, the user decides not to drop the file into the drop zone and moves the file away from the drop zone. In that case, the drop zone stays green. So is there an event that fires when the file goes away the drop zone, so then, the drop zone turns white again? Something like ondragaway?
You could use ondragleave :
Note that I also replace ondragover with ondragenter for the sake of consistensy.
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>