将文件拖到元素上时突出显示该元素

假设我们有一个可拖放元素，如下所示：

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

当用户在元素上拖动文件时，我们将高亮显示该元素。例如，元素将有一个虚线边框：

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

当用户拖动文件并将其移动到元素上时，dragging 类将被添加到元素中:

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')
})

最后，在处理程序中使用 e.preventDefault() 来阻止浏览器执行默认操作。

查看效果