React-beautiful-dnd: Specify Draggable area of Items in a list

[IbtsamGujjar]

Description

I have a use case where I want to limit the draggable area for items in a list.
Let's say I have a menu button in each item in the list, I should be able to drag the items from menu button only not the whole item.

Here's a sandbox example
Sandbox

Thanks

[mflash123]

Description

I have a use case where I want to limit the draggable area for items in a list.
Let's say I have a menu button in each item in the list, I should be able to drag the items from menu button only not the whole item.

Here's a sandbox example
Sandbox

Thanks

did you find solution?

[IbtsamGujjar]

No I didn't find the solution

[mflash123]

No I didn't find the solution

Thats sad that community doesnt help. I spend all day to find solution.
Solution:
Just move {...provided.dragHandleProps} from Draffable 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>

[IbtsamGujjar]

@mflash123 Thank you for the solution it worked!

[PotLid]

@mflash123 It works like a charm. Thanks!

[taejs]

I think it's called placeholder

[IbtsamGujjar]

Closing this thanks to @mflash123