handle panstart event.

src/movable.js

@@ -11,22 +11,25 @@ define(function(require) {
   componentDidMount: function() {
       var node = this.getDOMNode();
       var hammer = this.hammer = new Hammer(node);
-      hammer.on('panmove', function(e) {
-        this.setState({
-          movingNode: {
-            x: this.props.x + e.deltaX,
-            y: this.props.y + e.deltaY
-          }
-        });
-      }.bind(this));
-      hammer.on('panend', function(e) {
-        var movingNode = this.state.movingNode;
-        this.props.firebaseRef.update({
-          x: movingNode.x,
-          y: movingNode.y
-        });
-        this.setState({movingNode: null});
-      }.bind(this));
+      hammer.on('panstart', this.handlePanStartAndMove);
+      hammer.on('panmove', this.handlePanStartAndMove);
+      hammer.on('panend', this.handlePanEnd);
+    },
+    handlePanStartAndMove: function(e) {
+      this.setState({
+        movingNode: {
+          x: this.props.x + e.deltaX,
+          y: this.props.y + e.deltaY
+        }
+      });
+    },
+    handlePanEnd: function(e) {
+      var movingNode = this.state.movingNode;
+      this.props.firebaseRef.update({
+        x: movingNode.x,
+        y: movingNode.y
+      });
+      this.setState({movingNode: null});
     },
     componentWillUnmount: function() {
       this.hammer.destroy();