added src/movable-image.jsx.

require-config.js

@@ -1,5 +1,6 @@
 var require = {
   paths: {
+    "hammer": "vendor/hammer",
     "firebase": "vendor/firebase",
     "text": "vendor/require.text",
     "jsx": "vendor/require.jsx",

src/app.jsx

@@ -1,14 +1,6 @@
 define(function(require) {
   var React = require('react');
-
-  var Item = React.createClass({
-    handleClick: function() {
-      this.props.firebaseRef.set(this.props.item + 1);
-    },
-    render: function() {
-      return <button className="btn btn-default" onClick={this.handleClick}>{this.props.item}</button>;
-    }
-  });
+  var MovableImage = require('jsx!./movable-image');
 
   var App = React.createClass({
     getInitialState: function() {
@@ -25,15 +17,27 @@ define(function(require) {
     handleFirebaseRefValue: function(snapshot) {
       this.setState({items: snapshot.val()});
     },
+    handleAddImage: function() {
+      var url = window.prompt("Gimme an image URL.");
+      if (!/^https?:\/\//.test(url)) return;
+      this.props.firebaseRef.push({
+        url: url,
+        x: 0,
+        y: 0
+      });
+    },
     render: function() {
       var items = this.state.items || {};
       var itemsRef = this.props.firebaseRef;
       return (
         <div>
+          <button className="btn btn-default" onClick={this.handleAddImage}><i className="fa fa-image"></i> </button>
+          <div style={{position: 'relative'}}>
           {Object.keys(items).map(function(key) {
-            return <Item key={key} item={items[key]} firebaseRef={itemsRef.child(key)}/>;
+            return <MovableImage key={key} item={items[key]} firebaseRef={itemsRef.child(key)}/>;
           })}
           </div>
+        </div>
       );
     }
   });

src/movable-image.jsx

@@ -0,0 +1,49 @@
+define(function(require) {
+  var React = require('react');
+  var Hammer = require('hammer');
+
+  var MovableImage = React.createClass({
+    getInitialState: function() {
+      return {
+        movingImage: 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.item.x + e.deltaX,
+            y: this.props.item.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({movingImag: null});
+      }.bind(this));
+    },
+    componentWillUnmount: function() {
+      this.hammer.destroy();
+      this.hammer = null;
+    },
+    render: function() {
+      var item = this.props.item;
+      var coords = this.state.movingImage || item;
+      var style = {
+        position: 'absolute',
+        top: coords.y,
+        left: coords.x
+      };
+
+      return <img ref="image" style={style} src={item.url}/>;
+    }
+  });
+
+  return MovableImage;
+});