0
点赞
收藏
分享

微信扫一扫

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

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

<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()​​ 来阻止浏览器执行默认操作。

​​查看效果​​

举报

相关推荐

0 条评论