title: Moving react-draggable to side of screen?
body: <p>I have a react-draggable component which I'd like to behave like the <a href="http://tapsmart.wpengine.netdna-cdn.com/wp-content/uploads/2015/06/assistive-touch-1024x772.png" rel="noreferrer">assistive touch</a> </p>
  
  <p>I figured before getting animations working I just need to set the x position to either the left or right most extend of the window when the user lets go of the drag, I tried the following:</p>
  
  <pre class="lang-js prettyprint-override"><code>import Draggable, { ControlPosition } from 'react-draggable'; // The default
  import * as React from 'react';
  import './style.less'
  
  export default class FloatingScreenSpace extends React.Component&lt;{}, {position:ControlPosition}&gt; {
      state ={
          position: {x:90,y:0}
      }
  
      draggable: React.RefObject&lt;Draggable&gt; = React.createRef();
  
      onDragEnd = (e:MouseEvent)=&gt;{
          if(this.draggable.current){
              this.setState({
                  position:{
                      x: 0,
                      y: e.clientY
                  }
              })
          }
      }
  
      public render() {
          return &lt;Draggable position={this.state.position} ref={this.draggable} onStop={this.onDragEnd}&gt;
              &lt;div className="floatingActionButton" style={{ width: '100px', height: '100px' }}&gt;&lt;/div&gt;
          &lt;/Draggable&gt;
      }
  }
  </code></pre>
  
  <p>I thought setting the x position to 0 in the setState function it would set it to the left most side of the screen, however that did not happen. In fact it didn't seem to have an affect at all.</p>
  
  <p>Ideally I'd like to animate the button to the nearest edge of the screen (top, bottom, left, right) when the user lets go.</p>