Add bounds options.

Fixes #36, #35, #31.

Author: STRML

README.md

@@ -74,6 +74,11 @@ var App = React.createClass({
 			//
 			// `grid` specifies the x and y that dragging should snap to.
 			//
+			// `bounds` specifies movement boundaries. Pass:
+			// - 'parent' restricts movement within the node's offsetParent
+			//	 (nearest node with position relative or absolute), or
+			// - An object with left, top, right, and bottom properties.
+			//
 			// `zIndex` specifies the zIndex to use while dragging.
 			//
 			// `onStart` is called when dragging starts.

example/index.html

@@ -108,14 +108,26 @@ <h1>React Draggable</h1>
           <Draggable grid={[50, 50]}>
             <div className="box">I snap to a 50 x 50 grid</div>
           </Draggable>
-          <Draggable>
-            <div className="box" style={{position: 'absolute', top: '400px', left: '700px'}}>
-              I already have left and top properties assigned.
-            </div>
+          <Draggable bounds={{top: 0, left: 0, right: 300, bottom: 300}} zIndex={5}>
+            <div className="box">I can only be moved within 300px bounds.</div>
           </Draggable>
+          <div className="box" style={{height: '500px', width: '500px', position: 'relative'}}>
+            <Draggable bounds="parent">
+              <div className="box">
+                I can only be moved within my offsetParent.<br /><br />
+                Both parent padding and child margin work properly.
+              </div>
+            </Draggable>
+            <Draggable bounds="parent">
+              <div className="box">
+                I also can only be moved within my offsetParent.<br /><br />
+                Both parent padding and child margin work properly.
+              </div>
+            </Draggable>
+          </div>
           <Draggable>
             <div className="box" style={{position: 'absolute', bottom: '100px', right: '100px'}}>
-              I already have bottom and right properties assigned.
+              I already have an absolute position.
             </div>
           </Draggable>
         </div>

lib/draggable.js

@@ -125,6 +125,82 @@ function removeEvent(el, event, handler) {
   }
 }
 
+function outerHeight(node) {
+  // This is deliberately excluding margin for our calculations, since we are using
+  // offsetTop which is including margin. See getBoundPosition
+  var height = node.clientHeight;
+  var computedStyle = window.getComputedStyle(node);
+  height += int(computedStyle.borderTopWidth);
+  height += int(computedStyle.borderBottomWidth);
+  return height;
+}
+
+function outerWidth(node) {
+  // This is deliberately excluding margin for our calculations, since we are using
+  // offsetLeft which is including margin. See getBoundPosition
+  var width = node.clientWidth;
+  var computedStyle = window.getComputedStyle(node);
+  width += int(computedStyle.borderLeftWidth);
+  width += int(computedStyle.borderRightWidth);
+  return width;
+}
+function innerHeight(node) {
+  var height = node.clientHeight;
+  var computedStyle = window.getComputedStyle(node);
+  height -= int(computedStyle.paddingTop);
+  height -= int(computedStyle.paddingBottom);
+  return height;
+}
+
+function innerWidth(node) {
+  var width = node.clientWidth;
+  var computedStyle = window.getComputedStyle(node);
+  width -= int(computedStyle.paddingLeft);
+  width -= int(computedStyle.paddingRight);
+  return width;
+}
+
+function isNum(num) {
+  return typeof num === 'number' && !isNaN(num);
+}
+
+function int(a) {
+  return parseInt(a, 10);
+}
+
+function getBoundPosition(draggable, clientX, clientY) {
+  var bounds = JSON.parse(JSON.stringify(draggable.props.bounds));
+  var node = draggable.getDOMNode();
+  var parent = node.parentNode;
+
+  if (bounds === 'parent') {
+    var nodeStyle = window.getComputedStyle(node);
+    var parentStyle = window.getComputedStyle(parent);
+    // Compute bounds. This is a pain with padding and offsets but this gets it exactly right.
+    bounds = {
+      left: -node.offsetLeft + int(parentStyle.paddingLeft) +
+            int(nodeStyle.borderLeftWidth) + int(nodeStyle.marginLeft),
+      top: -node.offsetTop + int(parentStyle.paddingTop) +
+            int(nodeStyle.borderTopWidth) + int(nodeStyle.marginTop),
+      right: innerWidth(parent) - outerWidth(node) - node.offsetLeft,
+      bottom: innerHeight(parent) - outerHeight(node) - node.offsetTop
+    };
+  } else {
+    if (isNum(bounds.right)) bounds.right -= outerWidth(node);
+    if (isNum(bounds.bottom)) bounds.bottom -= outerHeight(node);
+  }
+
+  // Keep x and y below right and bottom limits...
+  if (isNum(bounds.right)) clientX = Math.min(clientX, bounds.right);
+  if (isNum(bounds.bottom)) clientY = Math.min(clientY, bounds.bottom);
+
+  // But above left and top limits.
+  if (isNum(bounds.left)) clientX = Math.max(clientX, bounds.left);
+  if (isNum(bounds.top)) clientY = Math.max(clientY, bounds.top);
+
+  return [clientX, clientY];
+}
+
 function snapToGrid(grid, pendingX, pendingY) {
   var x = Math.round(pendingX / grid[0]) * grid[0];
   var y = Math.round(pendingY / grid[1]) * grid[1];
@@ -185,6 +261,42 @@ module.exports = React.createClass({
      */
     axis: React.PropTypes.oneOf(['both', 'x', 'y']),
 
+    /**
+     * `bounds` determines the range of movement available to the element.
+     * Available values are:
+     *
+     * 'parent' restricts movement within the Draggable's parent node.
+     *
+     * Alternatively, pass an object with the following properties, all of which are optional:
+     *
+     * {left: LEFT_BOUND, right: RIGHT_BOUND, bottom: BOTTOM_BOUND, top: TOP_BOUND}
+     *
+     * All values are in px.
+     *
+     * Example:
+     *
+     * ```jsx
+     *   var App = React.createClass({
+     *       render: function () {
+     *         return (
+     *            <Draggable bounds={{right: 300, bottom: 300}}>
+     *              <div>Content</div>
+     *           </Draggable>
+     *         );
+     *       }
+     *   });
+     * ```
+     */
+    bounds: React.PropTypes.oneOfType([
+      React.PropTypes.shape({
+        left: React.PropTypes.Number,
+        right: React.PropTypes.Number,
+        top: React.PropTypes.Number,
+        bottom: React.PropTypes.Number
+      }),
+      React.PropTypes.oneOf(['parent', false])
+    ]),
+
     /**
      * By default, we add 'user-select:none' attributes to the document body
      * to prevent ugly text selection during drag. If this is causing problems
@@ -353,6 +465,7 @@ module.exports = React.createClass({
   getDefaultProps: function () {
     return {
       axis: 'both',
+      bounds: false,
       handle: null,
       cancel: null,
       grid: null,
@@ -454,6 +567,11 @@ module.exports = React.createClass({
       clientX = coords[0], clientY = coords[1];
     }
 
+    if (this.props.bounds) {
+      var pos = getBoundPosition(this, clientX, clientY);
+      clientX = pos[0], clientY = pos[1];
+    }
+
     // Call event handler. If it returns explicit false, cancel.
     var shouldUpdate = this.props.onDrag(e, createUIEvent(this));
     if (shouldUpdate === false) return this.handleDragEnd();

specs/draggable.spec.js

@@ -17,6 +17,7 @@ describe('react-draggable', function () {
       expect(drag.props.axis).toEqual('both');
       expect(drag.props.handle).toEqual(null);
       expect(drag.props.cancel).toEqual(null);
+      expect(drag.props.bounds).toBeFalsy();
       expect(isNaN(drag.props.zIndex)).toEqual(true);
       expect(typeof drag.props.onStart).toEqual('function');
       expect(typeof drag.props.onDrag).toEqual('function');