click drag question

common/app/routes/Hikes/components/Hikes.jsx

@@ -43,9 +43,10 @@ export default contain(
 
     render() {
       const { hikes, children, currentHike } = this.props;
+      const preventOverflow = { overflow: 'hidden' };
       return (
         <div>
-          <Row>
+          <Row style={ preventOverflow }>
             { this.renderChild(children, hikes, currentHike) ||
               this.renderMap(hikes) }
           </Row>

common/app/routes/Hikes/components/Question.jsx

@@ -1,4 +1,5 @@
 import React, { PropTypes } from 'react';
+import { Spring } from 'react-motion';
 import { Navigation, TransitionHook } from 'react-router';
 import debugFactory from 'debug';
 import {
@@ -12,11 +13,8 @@ import {
 const debug = debugFactory('freecc:hikes');
 
 export default React.createClass({
-  getInitialState: () => ({
-    showInfo: false,
-    shake: false
-  }),
   displayName: 'Question',
+
   mixins: [
     Navigation,
     TransitionHook
@@ -29,6 +27,50 @@ export default React.createClass({
     params: PropTypes.object
   },
 
+  getInitialState: () => ({
+    mouse: [0, 0],
+    delta: [0, 0],
+    isPressed: false,
+    showInfo: false,
+    shake: false
+  }),
+
+  getTweenValues() {
+    const { mouse: [x, y] } = this.state;
+    return {
+      val: { x, y },
+      config: [120, 17]
+    };
+  },
+
+  handleMouseDown({ pageX, pageY }) {
+    const { mouse: [pressX, pressY] } = this.state;
+    const dx = pageX - pressX;
+    const dy = pageY - pressY;
+    this.setState({
+      isPressed: true,
+      delta: [dx, dy],
+      mouse: [pageX - dx, pageY - dy]
+    });
+  },
+
+  handleMouseUp() {
+    this.setState({
+      isPressed: false,
+      mouse: [0, 0],
+      delta: [0, 0]
+    });
+  },
+
+  handleMouseMove({ pageX, pageY }) {
+    const { isPressed, delta: [dx, dy] } = this.state;
+    if (isPressed) {
+      this.setState({
+        mouse: [pageX - dx, pageY - dy]
+      });
+    }
+  },
+
   hideInfo() {
     this.setState({ showInfo: false });
   },
@@ -120,6 +162,25 @@ export default React.createClass({
     );
   },
 
+  renderQuestion(question, shake) {
+    return ({ val: { x } }) => {
+      const style = {
+        WebkitTransform: `translate3d(${ x }px, 0, 0)`,
+        transform: `translate3d(${ x }px, 0, 0)`
+      };
+      return (
+        <Panel
+          className={ shake ? 'animated shake' : '' }
+          onMouseDown={ this.handleMouseDown }
+          onMouseMove={this.handleMouseMove}
+          onMouseUp={ this.handleMouseUp }
+          style={ style }>
+          <p>{ question }</p>
+        </Panel>
+      );
+    };
+  },
+
   render() {
     const { showInfo, shake } = this.state;
     const { currentHike: { tests = [] } } = this.props;
@@ -129,12 +190,13 @@ export default React.createClass({
 
     return (
       <Col
+        onMouseUp={ this.handleMouseUp }
         xs={ 8 }
         xsOffset={ 2 }>
         <Row>
-          <Panel className={ shake ? 'animated shake' : '' }>
+          <Spring endValue={ this.getTweenValues }>
-            <p>{ question }</p>
+            { this.renderQuestion(question, shake) }
-          </Panel>
+          </Spring>
           { this.renderInfo(showInfo, info) }
           <Panel>
             <Button

package.json

@@ -90,6 +90,7 @@
     "ramda": "~0.10.0",
     "react": "^0.13.3",
     "react-bootstrap": "^0.23.7",
+    "react-motion": "~0.1.0",
     "react-router": "https://github.com/BerkeleyTrue/react-router#freecodecamp",
     "react-vimeo": "^0.0.3",
     "request": "~2.53.0",