React中Div拖拽至容器失败：Drop函数数据为空报错的修复咨询

问题根源 #

你的代码里存在几个关键问题导致拖拽功能异常：

• 拖拽元素缺少ID：被拖拽的.drag div没有设置id属性，所以ev.target.id是空字符串，调用ev.dataTransfer.setData("text", ev.target.id)时存的是空值，drop阶段自然拿不到有效数据。
• DOM获取方式不符合React规范：直接在组件顶层用document.querySelector(".drag")获取DOM，组件首次渲染时DOM还没挂载，drag变量会是null，触发onmousemove时会报错无法设置style。
• 鼠标抬起状态错误：Onmouseup函数里错误地把isDown设为true，应该设为false，否则鼠标松开后拖拽状态不会终止。
• 原生拖拽与手动拖拽逻辑冲突：你同时使用了HTML5原生拖拽API（draggable、onDragStart、onDrop）和手动监听mousedown/mousemove/mouseup来移动元素，两者逻辑冲突，导致原生拖拽的数据传递被干扰。

修复方案 #

下面是修复后的完整代码，保留原生拖拽API逻辑（这是实现元素拖放容器的标准方式），移除了手动拖拽的冗余代码：

import { useState } from "react";

export default function App() {
  function handleDragStart(ev) {
    // 给拖拽元素设置固定ID，也可以用动态生成的ID
    ev.target.id = "dragElement";
    ev.dataTransfer.setData("text/plain", ev.target.id);
  }

  function handleDrop(ev) {
    ev.preventDefault();
    ev.stopPropagation();
    const data = ev.dataTransfer.getData("text/plain");
    const draggedElement = document.getElementById(data);
    // 容错判断，避免元素不存在时报错
    if (draggedElement) {
      ev.target.appendChild(draggedElement);
    }
  }

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

  return (
    <div className="App">
      <div
        style={{
          width: "350px",
          height: "70px",
          padding: "10px",
          border: "1px solid #aaaaaa"
        }}
        id="div1"
        onDrop={handleDrop}
        onDragOver={handleDragOver}
      ></div>
      <div
        className="drag"
        style={{
          width: "50px",
          height: "50px",
          background: "yellow",
          cursor: "move"
        }}
        draggable="true"
        onDragStart={handleDragStart}
      >
        Drag
      </div>
    </div>
  );
}

关键修改点说明： #

1. 添加拖拽元素ID：在handleDragStart中给拖拽元素设置ID（也可以直接在JSX里写死id="dragElement"），确保dataTransfer能存储有效数据。
2. 移除手动拖拽逻辑：删除isDown状态、Onmousedown/Onmouseup/Onmousemove函数，避免和原生拖拽API冲突。
3. 完善drop函数的容错处理：添加if (draggedElement)判断，防止因元素不存在导致的appendChild报错。
4. 优化函数命名：使用更符合React规范的驼峰命名（比如handleDragStart代替dragi），提升代码可读性。

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