factored out a Movable mixin.

src/movable-image.jsx

@@ -1,46 +1,16 @@
 define(function(require) {
   var React = require('react');
-  var Hammer = require('hammer');
+  var Movable = require('./movable');
 
   var MovableImage = React.createClass({
+    mixins: [Movable],
     getInitialState: function() {
       return {
-        movingImage: null
+        movingNode: null
       };
     },
-    componentDidMount: function() {
-      var image = this.refs.image.getDOMNode();
-      var hammer = this.hammer = new Hammer(image);
-      hammer.on('panmove', function(e) {
-        this.setState({
-          movingImage: {
-            x: this.props.x + e.deltaX,
-            y: this.props.y + e.deltaY
-          }
-        });
-      }.bind(this));
-      hammer.on('panend', function(e) {
-        var movingImage = this.state.movingImage;
-        this.props.firebaseRef.update({
-          x: movingImage.x,
-          y: movingImage.y
-        });
-        this.setState({movingImage: null});
-      }.bind(this));
-    },
-    componentWillUnmount: function() {
-      this.hammer.destroy();
-      this.hammer = null;
-    },
     render: function() {
-      var coords = this.state.movingImage || this.props;
-      var style = {
-        position: 'absolute',
-        top: coords.y,
-        left: coords.x
-      };
-
-      return <img ref="image" style={style} src={this.props.url} width={this.props.width} height={this.props.height}/>;
+      return <img style={this.getMovingStyle()} src={this.props.url} width={this.props.width} height={this.props.height}/>;
     }
   });
 

src/movable-text.jsx

@@ -1,46 +1,20 @@
 define(function(require) {
+  var _ = require('underscore');
   var React = require('react');
-  var Hammer = require('hammer');
+  var Movable = require('./movable');
 
   var MovableText = React.createClass({
+    mixins: [Movable],
     getInitialState: function() {
       return {
-        movingText: null
+        movingNode: null
       };
     },
-    componentDidMount: function() {
-      var text = this.refs.text.getDOMNode();
-      var hammer = this.hammer = new Hammer(text);
-      hammer.on('panmove', function(e) {
-        this.setState({
-          movingText: {
-            x: this.props.x + e.deltaX,
-            y: this.props.y + e.deltaY
-          }
-        });
-      }.bind(this));
-      hammer.on('panend', function(e) {
-        var movingText = this.state.movingText;
-        this.props.firebaseRef.update({
-          x: movingText.x,
-          y: movingText.y
-        });
-        this.setState({movingText: null});
-      }.bind(this));
-    },
-    componentWillUnmount: function() {
-      this.hammer.destroy();
-      this.hammer = null;
-    },
     render: function() {
-      var coords = this.state.movingText || this.props;
-      var style = {
+      var style = _.extend({
         background: 'rgba(255, 255, 255, 0.5)',
         padding: 10,
-        position: 'absolute',
-        top: coords.y,
-        left: coords.x
-      };
+      }, this.getMovingStyle());
 
       return <span ref="text" style={style}>{this.props.text}</span>;
     }

src/movable.js

@@ -0,0 +1,46 @@
+define(function(require) {
+  var React = require('react');
+  var Hammer = require('hammer');
+
+  var Movable = {
+    propTypes: {
+      firebaseRef: React.PropTypes.object.isRequired,
+      x: React.PropTypes.number.isRequired,
+      y: React.PropTypes.number.isRequired,
+    },
+    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));
+    },
+    componentWillUnmount: function() {
+      this.hammer.destroy();
+      this.hammer = null;
+    },
+    getMovingStyle: function() {
+      var coords = this.state.movingNode || this.props;
+      return {
+        position: 'absolute',
+        top: coords.y,
+        left: coords.x
+      };
+    }
+  };
+
+  return Movable;
+});