First off, this is NOT a duplicate of all those other questions trying to implement drag and drop for svgs and answerers telling them they can’t – somehow this code I’m reading HAS done it, and I can’t figure out how.

I’m working on a project called react-hexgrid. It’s a library that uses a variety of functions to draw hexagons using svg. The library has code for drag and drop, but I’m not sure how to use it.

This example uses some old class…extends react syntax to implement drag and drop, along with a library called “react-scripts.” You can see some of the implementations of the drag and drop props/functions here. If you were to clone, install, and run that example, you would see that drag and drop does indeed work.

However, I tried writing some code like this:

    <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>

This code does NOT work, no matter how much I click, mouseover, or drag on any of the elements. I don’t understand why this doesn’t work, but the older code linked above does. Any ideas?