[FEATURE] Support dragging one element to move another ( drag handles )

Is your feature request related to a problem? Please describe. Hello, I’m wondering if there is a supported way to implement drag handles ( a draggable section of an element, or dragging a child to move the parent ) at the moment. I’ve had some luck with /dev/examples/dragExternalValues but the need for _props and lack of documentation isn’t ideal.

Describe the solution you’d like Ideally, a dragHandle prop that accepts a ref with the element we want to use as a handle.

<Container drag dragHandle={dragHandle}>
  <Handle ref={dragHandle} />
  ...
</Parent>

Dragging the handle element would move the container element, dragging inside the container but outside the handle would not register as a drag. Essentially the top bar of a macos window would be a dragHandle to the main window.

Describe alternatives you’ve considered The only current alternative seems to be the _dragX, _dragY, and __dragTransitionControls props. These work well but are not documented as far as I can tell and don’t feel as clean as the rest of the library.

Thanks again for the library. It’s fantastic.

[mattgperry]

@alacroix You can probably add a mousedown/pointerdown event to the element itself (via a ref) and calling event.preventDefault. But yeah we can take this a step further and look into adding a prop or something that suppresses this.

Approach 1

<motion.div drag="x" dragListener={false} dragControls={dragControls} />

Approach 2

function onMouseDown(event) {
  dragControls.start(event, { axis: "x" })
}

return <motion.div dragControls={dragControls} />

[mattgperry]

Yeah because drag might only optionally be on the component, and it’s where we define axis, we’d have to define it somewhere else. But everything else would be on the component.

However I’m thinking approach 1 would probably be better. Keeps the number of permutations saner.