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

Question

我正在使用 react-beautiful-dnd

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

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

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

Answer 1

解决方案：只需{...provided.dragHandleProps}从 Draggable div移动到 child，您想要用作拖动区域的区域。例子：

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