Search code examples
reactjsreact-grid-layout

React-grid-layout - drag only on first div

I implemented react-grid-layout with two elements. The thing is I have text in the first element and because it is draggable I can't copy the text from it because the element is moving.

I don't want to use a button to copy the text, but I was thinking maybe it is possible to decide which element can drag the whole square, is that even possible?

This is an example of the code I use:

<ResponsiveGridLayout
  className="layout"
  rowHeight={Number(height / 8) - 2}
  width={0.5}
  margin={[0, 0]}
>
<div
  key="a"
  data-grid={{ x: 0, y: 0, w: 1, h: 4 }}
>
  TEXT TEXT TEXT
  TEXT TEXT
</div>
<div
  key="b"
  data-grid={{ x: 0, y: 1, w: 1, h: 4 }}
>
  TEXT TEXT TEXT
  TEXT TEXT
</div>
</ResponsiveGridLayout>

enter image description here

Solution

  • For those who may need this, just found the solution:

    You should be able to target an element with a CSS selector in order to make it a drag handle. For example, if you add a class to your element like this:

    <MyComponent>
  <div className="drag-handle"></div>
</MyComponent>

    Then, you can pass the css selector using the draggableHandle prop like this:

    <GridLayout draggableHandle=".drag-handle">
{props.children}
</GridLayout>