【问题标题】:Change react-beautiful-dnd draggable click area更改 react-beautiful-dnd 可拖动点击区域
【发布时间】:2020-08-04 12:41:04
【问题描述】:
我正在使用 react-beautiful-dnd
找不到任何更改可拖动点击区域的解决方案。
当我点击自定义区域(而不是整个 Draggable 元素)时,我需要拖动项目。
例如,Draggable 元素有 Icon 和 text。当我单击该元素的任何位置时,默认行为允许我拖动项目。
我只需要点击拖动元素的图标。
如何指定拖动元素的点击区域?
【问题讨论】:
标签:
reactjs
draggable
react-beautiful-dnd
【解决方案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>