How to set a start position in 2.x+

[TimotheAlbouy]

I want to set a start position for my Draggable component.

I've seen that the start prop has been deprecated as of 2.x and replaced by the position prop, but this props makes the component not draggable by the user.

I have also tried to set an absolute position like that:

<div style={{ position: "relative", height: "500px", width="500px" }}>
  <Draggable onStop="handleOnStop">
    <div style={{ position: "absolute", top: "15px", left: "15px" }}>
      Hello World
    </div>
  </Draggable>
</div>

but the problem is that when I retrieve the coordinates in the handleOnStop(evt, data) method, the x and y in the data object are relative to the absolute position I gave, not the upper-left corner of the wrapping <div>.

My temporary solution, failing a better one, is to give a position to the position prop and to directly set it to null just after:

constructor(props) {
  super(props);
  this.state = { controlPosition: {x: 15, y: 15}};
}

componentDidMount() {
  this.setState({ controlPosition: null });
}

render() {
  ...
  <Draggable position={controlPosition} onStop={handleOnStop}>
  ...
}

Is there a better way to do that?

[djnorrisdev]

Have you tried setting an onDrag handler?

[STRML]

Use positionOffset.