Just an idea how to do better than https://github.com/mzabriskie/react-draggable
Idea: extract the state — make it controllable.
Instead of this
<Draggable
axis="x"
handle=".handle"
start={{x: 0, y: 0}}
moveOnStartChange={false}
grid={[25, 25]}
zIndex={100}
onStart={this.handleStart}
onDrag={this.handleDrag}
onStop={this.handleStop}>
<div>
<div className="handle">Drag from here</div>
<div>This readme is really dragging on...</div>
</div>
</Draggable>
Do something like this:
<Draggable
position={position}
onChangePositionRequest={handleChangePositionRequest}
>
<div>
<Handle
onChangePositionRequest={handleChangePositionRequest}
>Drag from here</Handle>
lol...
</div>
</Dragabble>
No need for ugly handle=".handle"
hack, full control of the state.
Although making components controlable not always easy,
virtually imposible for <video>
for instance. But this doesn't seem like one of those cases at firs look.