为何dragover事件导致drop事件无法触发？（足球网站拖拽场景）

核心问题分析 #

1. 事件绑定对象错误：你把drop、dragover这类拖拽接收事件绑定到了可拖拽的<span>本身，而这类事件应该绑定到接收拖拽的目标容器上。当你拖动元素到容器上时，触发drop的是容器，不是被拖动的元素。
2. 事件名大小写不匹配：你绑定事件时用的是ondrop（小写d），但定义的处理函数是onDrop（大写D），导致浏览器找不到对应的处理函数，就算触发了也不会执行。

修复步骤与代码示例 #

1. 拆分拖拽源与目标容器的事件绑定 #

可拖拽的<span>只需要监听拖拽开始和结束的事件，接收拖拽的容器（比如你的divAttacco2）才需要监听dragover、drop等接收类事件。

修正后的元素创建代码：

let spanAttaccanti = document.createElement("span");
// 拖拽源只需要dragstart和dragend
spanAttaccanti.addEventListener("dragstart", onDragStart);
spanAttaccanti.addEventListener("dragend", dragEnd);
spanAttaccanti.setAttribute("draggable", true);
spanAttaccanti.setAttribute("id", arrAttccanti[0][i]);
spanAttaccanti.innerHTML = arrAttccanti[0][i];
divAttacco2.appendChild(spanAttaccanti);

// 给目标容器绑定拖拽接收事件（替换成你实际的目标容器）
divAttacco2.addEventListener("dragover", ondragover);
divAttacco2.addEventListener("drop", onDrop); // 注意这里和函数名大小写一致
divAttacco2.addEventListener("dragenter", ondragenter);
divAttacco2.addEventListener("dragleave", onDragLeave);

2. 确保事件处理函数的正确性 #

修正事件名匹配问题，同时保证dragover事件中调用preventDefault()（这是触发drop事件的必要条件）：

let dragedItem;

function onDragStart(event) {
  console.log("inizio");
  setTimeout(() => this.classList.add("hidden"), 0);
  dragedItem = this;
}

function dragEnd(event) {
  dragedItem = null;
}

function ondragover(e) {
  console.log("hover");
  e.preventDefault(); // 必须调用，否则浏览器会阻止drop事件
}

function onDrop(event) {
  console.log("drop");
  event.preventDefault();
  // 这里添加将拖拽元素添加到目标容器的逻辑
  if (dragedItem) {
    this.appendChild(dragedItem);
    dragedItem.classList.remove("hidden");
  }
}

// 补充你定义的其他事件处理函数
function ondragenter(e) {
  e.preventDefault();
  // 可添加容器高亮样式，提升交互体验
}

function onDragLeave(e) {
  // 移除容器高亮样式
}

关键注意事项 #

• 拖拽事件分工明确：拖拽源负责dragstart（记录拖拽元素）和dragend（清理状态）；目标容器负责dragover（允许接收拖拽）、drop（处理放置逻辑）。
• 必须在dragover中调用e.preventDefault()：浏览器默认会阻止拖拽放置操作，只有阻止这个默认行为，drop事件才会被触发。
• 事件名严格区分大小写：JavaScript是大小写敏感的，绑定事件时的函数名必须和定义的完全一致。

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