React-grid-layout

Question

我用两个元素实现了 react-grid-layout。问题是我在第一个元素中有文本，因为它是可拖动的，所以我无法从中复制文本，因为该元素正在移动。

我不想使用按钮来复制文本，但我在想也许可以决定哪个元素可以拖动整个方块，这甚至可能吗？

这是我使用的代码示例：

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

Answer 1

对于那些可能需要这个的人，刚刚找到了解决方案：

您应该能够使用 CSS 选择器定位元素，以使其成为拖动手柄。例如，如果您像这样向元素添加 class：

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

然后，您可以像这样使用 draggableHandle 属性传递 css 选择器：

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

React-grid-layout - 仅在第一个 div 上拖动

React-grid-layout - drag only on first div

reactjs