An example for custom drag handle?

[rvetere]

It's a very common case to solve in many dnd solutions - a custom drag handle. For my feel it's a bit weird, an example for this is missing in the beautifully tailored storybook-thing you guys offer.

Especially weird to the point that egghead.io is offering a course to explain exactly that with react-beautiful-dnd, but i'm not willing to pay a subscription just for that... i can also get behind that magic myself, it just takes some more time ^^

https://egghead.io/lessons/react-designate-control-of-dragging-for-a-react-beautiful-dnd-draggable-with-draghandleprops

[radek-novak]

it's spreading the dragHandleProps onto the handle

<Draggable
  key={item.id}
  draggableId={item.id.toString()}
  index={index}
>
{provided => (
  <div
    ref={provided.innerRef}
    {...provided.draggableProps}
    style={{
      minHeight: 40,
      ...provided.draggableProps.style
    }}
  >
    <div {...provided.dragHandleProps}>handle</div>
    item
  </div>
)}
</Draggable>

complete example https://codesandbox.io/s/vertical-list-dgy2q?fontsize=14&hidenavigation=1&theme=dark

[alexreardon]

Especially weird to the point that egghead.io is offering a course to explain exactly that with react-beautiful-dnd, but i'm not willing to pay a subscription just for that... i can also get behind that magic myself, it just takes some more time ^^

The course is free for anyone

[verneleem]

It would be nice if there was a class inside of the dragHandleProps that could be included as an interactive element. I have a text block that I would like users to be able to highlight and copy/paste, but because the text block is inside of the dragHandleProps component it cannot be highlighted.