拖拽带图片的Div时ondrop无数据返回，如何解决？

问题根源 #

新通过拖拽上传/文件选择创建的图片Div，未正确配置拖拽属性与事件绑定，导致ondrop事件中无法从dataTransfer获取元素ID。而此前手动添加的元素预先完成了拖拽设置，因此功能正常。

具体修复步骤 #

• 开启动态元素的拖拽功能并绑定事件
  在生成新图片Div的代码中，添加draggable="true"属性，并在dragstart事件中把元素ID存入dataTransfer：

  // 示例：创建带拖拽功能的图片Div
  function createDraggableImageDiv(imgSrc, itemId) {
    const itemDiv = document.createElement('div');
    itemDiv.id = itemId;
    itemDiv.draggable = true;
    itemDiv.innerHTML = `<img src="${imgSrc}" alt="tier item">`;
    
    // 绑定dragstart事件，传递元素ID
    itemDiv.addEventListener('dragstart', (e) => {
      e.dataTransfer.setData('text/plain', itemDiv.id);
    });
    
    return itemDiv;
  }
  

• 修正ondrop事件的ID获取逻辑
  在目标行的ondrop事件中，通过dataTransfer.getData拿到ID，再获取对应元素并追加：

  // 目标行的drop事件处理
  function handleRowDrop(e) {
    e.preventDefault();
    const draggedItemId = e.dataTransfer.getData('text/plain');
    if (!draggedItemId) return;
    
    const draggedItem = document.getElementById(draggedItemId);
    if (draggedItem) {
      e.target.appendChild(draggedItem);
    }
  }
  

• 确保dragover事件阻止默认行为
  目标区域必须监听dragover并阻止默认行为，否则ondrop事件不会触发：

  function handleRowDragOver(e) {
    e.preventDefault();
  }
  

核心提示 #

动态生成的元素无法通过页面加载时的静态事件监听绑定，必须在创建元素时手动绑定拖拽相关事件；dataTransfer仅支持字符串数据，传递元素ID是最稳妥的方式，避免直接传递DOM对象。

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