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

Question

我正在使用 react-beautiful-dnd

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

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

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

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

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

Change react-beautiful-dnd draggable click area

reactjs

draggable

react-beautiful-dnd