Next.js 14中跨页面与模板组件的拖拽功能实现难题

方法1：将DnD上下文提升至根布局 #

react-dnd的核心依赖上下文共享，你可以把DndProvider直接放在Next.js 14的根布局（app/layout.tsx）中，让所有页面、模板组件都处于同一个DnD上下文内。

步骤：

1. 在根布局中导入并包裹DndProvider：

// app/layout.tsx
'use client';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-CN">
      <body>
        <DndProvider backend={HTML5Backend}>
          {children}
        </DndProvider>
      </body>
    </html>
  );
}

2. 模板中的侧边菜单（放置目标）和页面中的表格行（拖拽源）直接使用react-dnd的useDrag、useDrop钩子即可，无需再单独创建上下文。

方法2：使用原生HTML5拖拽API #

原生拖拽不需要依赖上下文，适合跨组件甚至跨页面的场景，实现起来更轻量。

示例代码：

• 表格行（拖拽源）：

// 表格行组件
'use client';

export default function TableRow({ rowData }) {
  const handleDragStart = (e) => {
    // 设置拖拽数据，序列化行数据
    e.dataTransfer.setData('text/plain', JSON.stringify(rowData));
    e.dataTransfer.effectAllowed = 'move';
  };

  return (
    <tr draggable="true" onDragStart={handleDragStart}>
      {/* 行内容 */}
    </tr>
  );
}

• 侧边菜单文件夹（放置目标）：

// 侧边菜单文件夹组件
'use client';

export default function FolderItem({ folderId }) {
  const handleDragOver = (e) => {
    e.preventDefault(); // 必须阻止默认行为才能触发drop
    e.dataTransfer.dropEffect = 'move';
  };

  const handleDrop = (e) => {
    e.preventDefault();
    const rowData = JSON.parse(e.dataTransfer.getData('text/plain'));
    // 处理拖拽完成后的逻辑，比如把行数据关联到该文件夹
    console.log(`将数据${rowData.id}移动到文件夹${folderId}`);
  };

  return (
    <div onDragOver={handleDragOver} onDrop={handleDrop}>
      {/* 文件夹内容 */}
    </div>
  );
}

注意：原生拖拽在不同浏览器的表现略有差异，需要测试兼容性；如果需要自定义拖拽预览，可以用setDragImage方法。

方法3：全局状态管理配合拖拽状态 #

如果需要更复杂的拖拽状态跟踪（比如拖拽中的视觉反馈），可以结合Zustand/Redux这类全局状态工具：

1. 创建全局状态存储拖拽的当前数据和状态（比如是否正在拖拽）
2. 在表格行的dragstart事件中更新全局状态，记录拖拽数据
3. 在侧边菜单文件夹的dragover/drop事件中读取全局状态，处理逻辑
4. 拖拽结束后清空全局状态

这种方式可以灵活控制拖拽过程中的UI变化，比如给拖拽中的文件夹添加高亮样式。

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