更改 react-beautiful-dnd 可拖动点击区域

Posted 2023-02-21

【中文标题】更改 react-beautiful-dnd 可拖动点击区域

【英文标题】：Change react-beautiful-dnd draggable click area

【发布时间】：2020-08-04 12:41:04

【问题描述】：

我正在使用 react-beautiful-dnd

找不到任何更改可拖动点击区域的解决方案。 当我点击自定义区域（而不是整个 Draggable 元素）时，我需要拖动项目。

例如，Draggable 元素有 Icon 和 text。当我单击该元素的任何位置时，默认行为允许我拖动项目。

我只需要点击拖动元素的图标。 如何指定拖动元素的点击区域？

【参考方案1】：

解决方案： 只需将 ...provided.dragHandleProps 从 Draggable div 移动到子级，您希望将其用作拖动区域。 示例：

<Draggable draggableId='draggable-1' index=0>
(provided)=>(
  <div
  ref=provided.innerRef
  ...provided.draggableProps
>
<div ...provided.dragHandleProps>DRAG AREA HERE</div>
  <li>item</li>
</div>
)

</Draggable>