React-grid-layout - 僅在第一個 div 上拖動

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>