ReactJS中onDrop事件未触发，拖拽文本无法放入目标盒子

核心问题分析 #

onDrop事件无法触发的核心原因是未在onDragOver事件中阻止浏览器默认行为——浏览器默认禁止元素拖拽到其他容器内，必须通过event.preventDefault()开启允许。另外你的代码存在两个关键缺失：handleDragOver函数未实现、部分目标容器未绑定onDrop事件，导致拖拽流程不完整。

分步修复方案 #

1. 实现handleDragOver并阻止默认行为

给组件添加这个函数，确保所有目标容器的onDragOver都调用它：

const handleDragOver = (event) => {
  event.preventDefault(); // 必须调用，否则onDrop永远不会触发
};

2. 完善handleDragStart传递拖拽标识

拖拽开始时需要通过dataTransfer传递元素ID，让onDrop能识别拖拽的元素：

const handleDragStart = (event) => {
  // 设置拖拽数据，用元素ID作为唯一标识
  event.dataTransfer.setData("dragID", event.target.id);
};

3. 补全目标容器的onDrop绑定

你的div1容器只绑定了onDragOver和onDragLeave，缺少onDrop事件，需要补上：

<div
  id="div1"
  className="target"
  data-name="down"
  onDrop={handleDrop}
  onDragOver={handleDragOver}
  onDragLeave={handleDragLeave}
></div>

4. 替换原生DOM操作为React状态管理（推荐）

React中不建议直接用document.getElementById这类原生DOM操作，改用状态管理元素位置和内容更符合React规范，避免潜在问题：

import { useState } from 'react';

function DragDropComponent() {
  const [targetContents, setTargetContents] = useState({
    itemSpot1: null,
    div1: null
  });
  const [tempText, setTempText] = useState("");
  const [tempPos, setTempPos] = useState("");

  const handleDragStart = (event) => {
    event.dataTransfer.setData("dragID", event.target.id);
  };

  const handleDragOver = (event) => {
    event.preventDefault();
  };

  const handleDrop = (event) => {
    event.preventDefault();
    const dragId = event.dataTransfer.getData("dragID");
    const targetId = event.target.id;

    // 更新目标容器内容状态
    setTargetContents(prev => ({
      ...prev,
      [targetId]: dragId
    }));

    // 更新底部显示文本和位置
    const direction = event.target.getAttribute("data-name");
    const pos = targetId.substring(3);
    setTempText("Item 1");
    setTempPos(pos);
  };

  return (
    <div>
      {/* 目标容器 */}
      <div
        id="itemSpot1"
        className="target"
        onDrop={handleDrop}
        onDragOver={handleDragOver}
      >
        {targetContents.itemSpot1 && <div className="element">Item 1</div>}
      </div>
      
      <div
        id="div1"
        className="target"
        data-name="down"
        onDrop={handleDrop}
        onDragOver={handleDragOver}
      >
        {targetContents.div1 && <div className="element">Item 1</div>}
      </div>

      {/* 可拖拽元素（未被放入容器时显示） */}
      {!targetContents.itemSpot1 && !targetContents.div1 && (
        <div
          id="item1"
          className="element"
          draggable="true"
          onDragStart={handleDragStart}
        >
          Item 1
        </div>
      )}

      {/* 底部显示区域 */}
      <div id="temp">{tempText}</div>
      <div id="tempPos">{tempPos}</div>
    </div>
  );
}

export default DragDropComponent;

额外注意点 #

• 如果需要处理onDragLeave的样式变化，同样通过状态控制类名或内联样式，不要直接操作DOM
• 拖拽元素的draggable="true"属性必须保留，这是触发拖拽事件的前提

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