Updating example to have appropriate cursors to provide the proper UX affordance.

Kent C. Dodds · Kent C. Dodds · commit 62a12156d960 · 2014-07-29T21:37:35.000-06:00
diff --git a/example/index.html b/example/index.html
@@ -12,6 +12,19 @@
 			margin: 0 50px;
 		}
 
+		.react-draggable, .cursor {
+			cursor: move;
+		}
+		.no-cursor {
+			cursor: auto;
+		}
+		.cursor-y {
+			cursor: ns-resize;
+		}
+		.cursor-x {
+			cursor: ew-resize;
+		}
+
 		.react-draggable strong {
 			background: #ddd;
 			border: 1px solid #999;
@@ -36,3 +49,5 @@
 </head>
 <body>
 <script src="../build/bundle.js"></script>
+</body>
+</html>
diff --git a/example/main.js b/example/main.js
@@ -34,10 +34,10 @@ var App = React.createClass({
 					<div className="box">I can be dragged anywhere</div>
 				</Draggable>
 				<Draggable axis="x" zIndex={100}>
-					<div className="box">I can only be dragged horizonally</div>
+					<div className="box cursor-x">I can only be dragged horizonally</div>
 				</Draggable>
 				<Draggable axis="y" zIndex={100}>
-					<div className="box">I can only be dragged vertically</div>
+					<div className="box cursor-y">I can only be dragged vertically</div>
 				</Draggable>
 				<Draggable onDrag={this.handleDrag} zIndex={100}>
 					<div className="box">
@@ -46,14 +46,14 @@ var App = React.createClass({
 					</div>
 				</Draggable>
 				<Draggable handle="strong" zIndex={100}>
-					<div className="box">
-						<strong>Drag here</strong>
+					<div className="box no-cursor">
+						<strong className="cursor">Drag here</strong>
 						<div>You must click my handle to drag me</div>
 					</div>
 				</Draggable>
 				<Draggable cancel="strong" zIndex={100}>
 					<div className="box">
-						<strong>Can't drag here</strong>
+						<strong className="no-cursor">Can't drag here</strong>
 						<div>Dragging here works</div>
 					</div>
 				</Draggable>
