JS中可拖拽元素仅首次拖拽有效问题排查求助

问题根源 #

1. 拖拽起始目标错误：当拖拽包含img的按钮时，ev.target可能指向内部的img元素而非按钮本身，导致dataTransfer存储的是img的id（无id时则会存储图片路径），而非按钮id，后续无法通过id定位到按钮元素。
2. 放置目标层级错误：drop事件中ev.target可能指向td内的文本节点或按钮子元素，而非td本身，按钮被追加到错误层级后，后续拖拽逻辑完全混乱。
3. 未阻止默认行为：drop事件未调用ev.preventDefault()，浏览器默认拖拽行为会干扰元素移动操作。

修复后的代码 #

HTML（补充含img的按钮示例） #

<!DOCTYPE html>
<html>
<body>
<table>
  <tbody>
    <tr>
      <td id="1">
        <button id="button-0">
          <img src="icon.png" alt="btn-icon"> BUTTON1
        </button>
      </td>
    </tr>
    <tr>
      <td id="3">        
         DRAG BUTTON HERE
      </td>
    </tr>
    <tr>
      <td id="2">
        <button id="button-1">
          <img src="icon2.png" alt="btn-icon"> BUTTON2
        </button>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

JavaScript #

// 批量初始化所有可放置的td
document.querySelectorAll('td[id]').forEach(td => {
  td.ondragover = enableDrop;
  td.ondrop = drop;
});

// 批量初始化所有可拖拽的按钮
document.querySelectorAll('button[id^="button-"]').forEach(btn => {
  btn.draggable = true;
  btn.ondragstart = drag;
  // 阻止内部img的默认拖拽行为，避免干扰按钮拖拽
  btn.querySelector('img')?.addEventListener('dragstart', e => e.preventDefault());
});

function enableDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  // 用currentTarget确保拿到绑定事件的按钮元素，而非内部子元素
  ev.dataTransfer.setData("text", ev.currentTarget.id);
}

function drop(ev) {
  ev.preventDefault();
  const data = ev.dataTransfer.getData("text");
  const button = document.getElementById(data);
  if (!button) return;
  
  // 向上查找定位到实际的td元素，避免按钮被追加到子节点中
  let targetTd = ev.target;
  while (targetTd.tagName !== 'TD') {
    targetTd = targetTd.parentElement;
    if (!targetTd) return;
  }
  
  targetTd.appendChild(button);
}

关键修改说明 #

• 用currentTarget替代target：currentTarget始终指向绑定事件的按钮元素，不会因点击到内部img而改变，确保存储的是正确的按钮id。
• 批量初始化事件：通过querySelectorAll批量处理元素，减少重复代码，提升可维护性。
• 阻止内部img拖拽：避免img触发自身拖拽行为，干扰按钮的拖拽逻辑。
• 定位td层级放置：通过循环向上查找，确保按钮被追加到td根层级，保证后续拖拽的目标正确性。
• 添加drop事件的默认行为阻止：避免浏览器默认的拖拽行为（如打开图片链接）影响元素移动。

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