Highlight an element when dragging a file over it

<div id="droppable">...</div>

.dragging {
    border: 4px dashed #ccc;
}

// Query the element
const ele = document.getElementById('droppable');

ele.addEventListener('dragenter', function (e) {
    e.preventDefault();
    e.target.classList.add('dragging');
});

ele.addEventListener('dragover', function (e) {
    e.preventDefault();
});

ele.addEventListener('dragleave', function (e) {
    e.preventDefault();
    e.target.classList.remove('dragging');
});

ele.addEventListener('drop', function (e) {
    e.preventDefault();
    e.target.classList.remove('dragging');
});