【问题标题】: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>
    

    【讨论】:

      猜你喜欢
      • 2020-05-05
      • 2019-04-29
      • 2022-08-24
      • 1970-01-01
      • 1970-01-01
      • 2020-09-27
      • 1970-01-01
      • 2014-11-11
      • 2021-02-08
      相关资源
      最近更新 更多