Updating example

Author: mzabriskie

example/index.html

@@ -5,11 +5,13 @@
 	<title>React Draggable</title>
 	<link rel="stylesheet" type="text/css" href="../lib/styles.css"/>
 	<style type="text/css">
-		.foo {
+		.box {
 			background: #fff;
 			border: 1px solid #333;
 			width: 150px;
 			height: 150px;
+			margin: 10px;
+			padding: 10px;
 		}
 	</style>
 </head>

example/main.js

@@ -2,11 +2,45 @@
 var React = require('react'),
 	Draggable = require('../lib/main');
 
-React.renderComponent(<div>
-	<Draggable>
-		<div className="foo">Hello</div>
-	</Draggable>
-	<Draggable>
-		<div className="foo">World</div>
-	</Draggable>
-</div>, document.body);
+var App = React.createClass({
+	handleStart: function (e, ui) {
+		console.log('start');
+	},
+
+	handleDrag: function (e, ui) {
+		console.log(ui.position);
+	},
+
+	handleStop: function () {
+		console.log('stop');
+	},
+
+	render: function () {
+		return (
+			<div>
+				<Draggable
+					onStart={this.handleStart}
+					onDrag={this.handleDrag}
+					onStop={this.handleStop}>
+					<div className="box">I can be dragged anywhere</div>
+				</Draggable>
+				<Draggable
+					axis='x'
+					onStart={this.handleStart}
+					onDrag={this.handleDrag}
+					onStop={this.handleStop}>
+					<div className="box">I can only be dragged horizonally</div>
+				</Draggable>
+				<Draggable
+					axis='y'
+					onStart={this.handleStart}
+					onDrag={this.handleDrag}
+					onStop={this.handleStop}>
+					<div className="box">I can only be dragged vertically</div>
+				</Draggable>
+			</div>
+		);
+	}
+});
+
+React.renderComponent(<App/>, document.body);