React draggable concept

react-draggable-concept.md

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.