react-hexgrid库SVG拖拽疑问：示例可行自研代码无效

这并非其他SVG拖拽实现问题的重复——参考的官方代码确实实现了拖拽功能，但自己编写的代码无法触发拖拽相关事件，而官方示例可正常运行。以下是问题分析与修复方案：

问题代码 #

import React from 'react';
import { Hexagon, HexGrid, Layout } from 'react-hexgrid';

function App() {
  return (
    <HexGrid width="100%" height="100%">
      <Layout>
        {/* drag and drop the colors! */}
        {/* the drag source */}
        <Hexagon
          q={0}
          r={0}
          s={0}
          style={{ fill: 'red' }}
          onDrop={() => {
            console.log('drag');
          }}
          onDragStart={() => {
            console.log('drag');
          }}
          onDrag={() => {
            console.log('drag');
          }}
        ></Hexagon>
      </Layout>
    </HexGrid>
  );
}

export default App;

核心问题 #

查看react-hexgrid的Hexagon组件源码可知，拖拽功能需要满足两个关键条件，你的代码均未实现：

1. 未显式开启draggable属性：组件默认不会启用拖拽能力，必须手动设置draggable={true}
2. 缺少onDragOver事件处理：浏览器默认会阻止drop事件触发，需在目标元素上调用e.preventDefault()才能激活onDrop

修复后的代码 #

import React from 'react';
import { Hexagon, HexGrid, Layout } from 'react-hexgrid';

function App() {
  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault(); // 必须阻止默认行为才能触发onDrop
  };

  return (
    <HexGrid width="100%" height="100%">
      <Layout>
        {/* 拖拽源 */}
        <Hexagon
          q={0}
          r={0}
          s={0}
          draggable={true} // 显式开启拖拽能力
          style={{ fill: 'red' }}
          onDragStart={() => {
            console.log('拖拽开始');
          }}
          onDrag={() => {
            console.log('拖拽中');
          }}
        ></Hexagon>

        {/* 拖拽目标示例 */}
        <Hexagon
          q={1}
          r={0}
          s={-1}
          style={{ fill: 'blue' }}
          onDragOver={handleDragOver}
          onDrop={() => {
            console.log('拖拽完成');
          }}
        ></Hexagon>
      </Layout>
    </HexGrid>
  );
}

export default App;

补充说明 #

• 若需要传递拖拽数据，可在onDragStart中通过e.dataTransfer.setData()设置，在onDrop中用e.dataTransfer.getData()获取
• 官方示例中还处理了拖拽状态的样式变化，可根据需求自行添加

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