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

Question

我正在使用react-beautiful-dnd

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

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

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

Answer 1

解决方案：只需将{...provided.dragHandleProps}从“可拖动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>