Изменить реагирующую красивую и перетаскиваемую область щелчка

Question

Я использую response-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>