Drag a React Fragment

I know that react-dnd requires an actual DOM node to work on. However I wanted to enable dragging a row in my container component using CSS grid. The CSS grid is arranged in rows and columns (using grid-template-columns). In the CSS grid, “rows” are just a collection of elements, there must be no enclosing <div> tag for example (this will break CSS grid).

My CSS grid container:

<div className="Container__grid">
  {list.map(row => <Row key={row.id} {...row} />)}
</div>

I would like to specify my drag source in Row as for example:

render = ({ connectDragSource }) => connectDragSource(
  <React.Fragment>
    <div>a cell</div
    <div>a cell</div>
  </React.Fragment>
);

But that’s not possible because React fragment is not backed up by any DOM node. Any options how to overcome this limitation?

[darthtrevino]

To follow up on this, you can use connectDragSource on a ref that’s a dom node, and this can be rendered inside of a fragment. In this case, the connected element will be the portion of the DOM that’s draggable.

e.g.

<>
   <div ref={connectDragSource}>...</div>
</>

[drjkuo]

@johnswanson display: contents makes the div not draggable