Vanilla JS开发可排序列表时除drop外所有拖拽事件均正常触发

核心原因 #

你遇到的drop事件不触发是HTML5原生拖拽API的默认机制导致：dragover事件的默认行为会主动阻止后续drop事件触发，你目前的代码没有在dragOver处理函数中取消默认行为，这是问题的根源。

修复步骤 #

• 第一步：修改dragOver事件处理函数，调用preventDefault()取消默认行为，必要时可同时阻止事件冒泡避免冲突

function dragOver(e) {
  // 必须取消dragover默认行为才能触发drop
  e.preventDefault();
  // 可选：阻止事件冒泡，避免父级元素干扰事件触发
  e.stopPropagation();
  // 可在此处添加拖拽悬停时的样式更新逻辑
}

• 第二步：如果修改后仍有问题，可同时在dragEnter处理函数中也取消默认行为：

function dragEnter(e) {
  e.preventDefault();
  e.stopPropagation();
  // 可在此处添加拖拽元素进入目标区域时的样式更新逻辑
}

• 第三步：确认dragDrop函数的基础逻辑正确，示例结构参考：

function dragDrop(e) {
  e.preventDefault();
  e.stopPropagation();
  // 此处编写拖拽释放后的列表排序逻辑
}

额外排查点 #

检查相关元素的CSS配置，如果li或者内部draggable元素设置了pointer-events: none属性，会导致拖拽事件无法正常触发。
确认代码中用到的listItems、draggable_list、dragStart等变量和函数均已提前定义，无引用错误。

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