JavaScript中drop事件不生效，调用preventDefault()仍无法触发怎么解决？

问题根源 #

HTML5 原生拖拽规范要求：元素要能接收drop事件，必须先阻止该元素上dragover、dragenter两个事件的默认行为。浏览器默认禁止任意元素作为拖拽放置目标，所以你仅在drop回调中执行阻止默认行为的操作是无效的，事件触发链到不了drop环节。

修复方案 #

修改你的JS代码，为放置目标补充dragover、dragenter事件监听即可：

const drag1 = document.querySelector(".drag-span-1");
const drop1 = document.querySelector(".drop-span-1");
const mainDiv = document.querySelector(".main-div");

// 补充：给放置目标绑定dragover、dragenter事件，阻止默认行为
const preventDefault = (e) => e.preventDefault();
drop1.addEventListener('dragover', preventDefault);
drop1.addEventListener('dragenter', preventDefault);
drag1.addEventListener('dragover', preventDefault);
drag1.addEventListener('dragenter', preventDefault);

drop1.addEventListener("drop" , (e)=>dropFunc(e , "span"));
drag1.addEventListener("drop" , (e)=>dropFunc(e , "span"));

function dropFunc (e , mode) {
    e.preventDefault()
    console.log(e , "drop" , mode)
}

额外说明 #

如果后续需要传递拖拽相关的自定义数据，可以给拖拽元素绑定dragstart事件，通过e.dataTransfer.setData()方法设置要传递的内容，在drop回调中用e.dataTransfer.getData()读取即可。

内容的提问来源于stack exchange，提问作者Hadi