Improving comments

Author: Matt Zabriskie

lib/draggable.js

@@ -239,21 +239,30 @@ module.exports = React.createClass({
 
 	getInitialState: function () {
 		return {
+			// Whether or not currently dragging
 			dragging: false,
+
+			// Start top/left of this.getDOMNode()
 			startX: 0, startY: 0,
+
+			// Offset between start top/left and mouse top/left
 			offsetX: 0, offsetY: 0,
+
+			// Current top/left of this.getDOMNode()
 			clientX: 0, clientY: 0
 		};
 	},
 
 	handleMouseDown: function (e) {
 		var node = this.getDOMNode();
 
+		// Short circuit if handle or cancel prop was provided and selector doesn't match
 		if ((this.props.handle && !matchesSelector(e.target, this.props.handle)) ||
 			(this.props.cancel && matchesSelector(e.target, this.props.cancel))) {
 			return;
 		}
 
+		// Initiate dragging
 		this.setState({
 			dragging: true,
 			offsetX: e.clientX,
@@ -262,31 +271,39 @@ module.exports = React.createClass({
 			startY: parseInt(node.style.top, 10) || 0
 		});
 
+		// Call event handler
 		this.props.onStart(e, createUIEvent(this));
 
+		// Add event handlers
 		addEvent(window, 'mousemove', this.handleMouseMove);
 		addEvent(window, 'mouseup', this.handleMouseUp);
 	},
 
 	handleMouseUp: function (e) {
+		// Short circuit if not currently dragging
 		if (!this.state.dragging) {
 			return;
 		}
 
+		// Turn off dragging
 		this.setState({
 			dragging: false
 		});
 
+		// Call event handler
 		this.props.onStop(e, createUIEvent(this));
 
+		// Remove event handlers
 		removeEvent(window, 'mousemove', this.handleMouseMove);
 		removeEvent(window, 'mouseup', this.handleMouseUp);
 	},
 
 	handleMouseMove: function (e) {
+		// Calculate top and left
 		var clientX = (this.state.startX + (e.clientX - this.state.offsetX));
 		var clientY = (this.state.startY + (e.clientY - this.state.offsetY));
 
+		// Snap to grid if prop has been provided
 		if (Array.isArray(this.props.grid)) {
 			clientX = Math.abs(clientX - this.state.clientX) >= this.props.grid[0]
 					? clientX
@@ -297,20 +314,30 @@ module.exports = React.createClass({
 					: this.state.clientY;
 		}
 
+		// Update top and left
 		this.setState({
 			clientX: clientX,
 			clientY: clientY
 		});
 
+		// Call event handler
 		this.props.onDrag(e, createUIEvent(this));
 	},
 
 	render: function () {
 		var style = {
-			top: canDragY(this) ? this.state.clientY : this.state.startY,
-			left: canDragX(this) ? this.state.clientX : this.state.startX
+			// Set top if vertical drag is enabled
+			top: canDragY(this)
+				? this.state.clientY
+				: this.state.startY,
+
+			// Set left if horizontal drag is enabled
+			left: canDragX(this)
+				? this.state.clientX
+				: this.state.startX
 		};
 
+		// Set zIndex if currently dragging and prop has been provided
 		if (this.state.dragging && !isNaN(this.props.zIndex)) {
 			style.zIndex = this.props.zIndex;
 		}