如何实现从React Portal弹窗拖拽元素到外部Droppable区域？

核心问题根源 #

React Portal的DOM节点是挂载到主应用DOM树之外的（比如document.body），如果拖拽库（如react-beautiful-dnd）的上下文只覆盖主应用内部，跨Portal的拖拽事件就无法被外部Droppable识别。

具体实现方案（以react-beautiful-dnd为例） #

1. 全局挂载拖拽上下文 #

把DragDropContext挂载到Portal和主应用共同的父层级，确保两者处于同一个拖拽上下文范围内。

import { DragDropContext } from 'react-beautiful-dnd';

function RootApp() {
  const handleDragEnd = (result) => {
    // 处理拖拽完成后的逻辑：比如将Portal的项添加到外部列表
    if (!result.destination) return;
    // 根据draggableId判断是否来自Portal，执行对应操作
  };

  return (
    <DragDropContext onDragEnd={handleDragEnd}>
      {/* 主应用内容，包含外部Droppable区域 */}
      <MainAppContent />
      {/* 这里可以放置Portal的触发组件，或者Portal本身 */}
    </DragDropContext>
  );
}

2. Portal内的Draggable配置 #

保持用Draggable包裹列表项，但确保每个项的draggableId唯一，且直接关联全局的拖拽上下文。

import { Draggable } from 'react-beautiful-dnd';
import ReactDOM from 'react-dom';

function PortalPopup({ items }) {
  return ReactDOM.createPortal(
    <div className="popup-container">
      {items.map((item, index) => (
        <Draggable key={item.id} draggableId={item.id} index={index}>
          {(provided) => (
            <div
              ref={provided.innerRef}
              {...provided.draggableProps}
              {...provided.dragHandleProps}
              className="popup-item"
            >
              {item.label}
            </div>
          )}
        </Draggable>
      ))}
    </div>,
    document.body
  );
}

3. 外部Droppable区域配置 #

外部的Droppable只需正常设置droppableId，就能接收来自Portal的拖拽项。

import { Droppable } from 'react-beautiful-dnd';

function MainAppContent() {
  return (
    <Droppable droppableId="external-drop-area">
      {(provided) => (
        <div
          ref={provided.innerRef}
          {...provided.droppableProps}
          className="drop-area"
        >
          {/* 现有内容 */}
          {provided.placeholder}
        </div>
      )}
    </Droppable>
  );
}

原生HTML5拖拽的适配方案 #

如果不用第三方库，需手动处理事件传递：

• 在Portal内的拖拽项上添加onDragStart，通过dataTransfer.setData()设置拖拽数据
• 确保Portal根元素不阻止事件冒泡（移除event.stopPropagation()）
• 外部Droppable区域监听onDragOver和onDrop事件，读取dataTransfer.getData()获取拖拽数据

额外注意事项 #

• 检查CSS层级：拖拽过程中，Draggable的克隆元素z-index需高于所有内容，避免被遮挡
• 测试拖拽边界：确保拖拽时鼠标移动到Portal外时，事件能正常传递到外部Droppable

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