Change react-beautiful-dnd draggable click area

Question

I am using react-beautiful-dnd

Cant find any solution for change Draggable click area. I need drag items when I click in custom area (not at whole Draggable element).

For example, Draggable element has Icon and text. Default behavior let me drag item when I click any place of that element.

I need click only on icon for drag element. How can I specify click area for drag element?

Answer 1

Solution: Just move {...provided.dragHandleProps} from Draggable div to child, what you want use as a drag area. Example:

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