From ffe7670a8e9eda08de12b42a6643f73d35f14cf1 Mon Sep 17 00:00:00 2001
From: Jonathan Lehman <jonathan.lehman91@gmail.com>
Date: Thu, 12 Feb 2015 21:35:40 -0500
Subject: [PATCH 1/2] Add min and max bound options

- Allow user to specify minimum and maximum boundaries for the draggable
---
 README.md               |  8 +++++++-
 example/index.html      |  5 ++++-
 lib/draggable.js        | 12 ++++++++++++
 specs/draggable.spec.js |  6 +++++-
 4 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index d733ffcb..d96515b8 100644
--- a/README.md
+++ b/README.md
@@ -54,6 +54,10 @@ var App = React.createClass({
 			//
 			// `grid` specifies the x and y that dragging should snap to.
 			//
+			// `minBounds` specifies the minimum x and y values.
+			//
+			// `maxBounds` specifies the maximum x and y values.
+			//
 			// `start` specifies the x and y that the dragged item should start at
 			//
 			// `zIndex` specifies the zIndex to use while dragging.
@@ -68,6 +72,8 @@ var App = React.createClass({
 				axis="x"
 				handle=".handle"
 				grid={[25, 25]}
+				minBounds={[0, 0]}
+				maxBounds={[500, 500]}
 				start={{x: 25, y: 25}}
 				zIndex={100}
 				onStart={this.handleStart}
@@ -98,4 +104,4 @@ React.renderComponent(<App/>, document.body);
 
 ## License
 
-MIT
\ No newline at end of file
+MIT
diff --git a/example/index.html b/example/index.html
index 98104232..998c31ff 100644
--- a/example/index.html
+++ b/example/index.html
@@ -109,6 +109,9 @@ <h1>React Draggable</h1>
           <Draggable grid={[50, 50]}>
             <div className="box">I snap to a 50 x 50 grid</div>
           </Draggable>
+          <Draggable minBounds={[0, 0]} maxBounds={[500, 500]}>
+            <div className="box">I am bound to the left and top at 0px and right and bottom at 500px</div>
+          </Draggable>
         </div>
       );
     }
@@ -117,4 +120,4 @@ <h1>React Draggable</h1>
   React.renderComponent(<App/>, document.body);
 </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/lib/draggable.js b/lib/draggable.js
index ce35eec0..3ac3bdb0 100644
--- a/lib/draggable.js
+++ b/lib/draggable.js
@@ -419,6 +419,18 @@ module.exports = React.createClass({
 					: this.state.clientY;
 		}
 
+		// prevent movement past minimum bounds
+		if (Array.isArray(this.props.minBounds)) {
+			clientX = Math.max(this.props.minBounds[0], clientX);
+			clientY = Math.max(this.props.minBounds[1], clientY);
+		}
+
+		// prevent movement past maximum bounds
+		if (Array.isArray(this.props.maxBounds)) {
+			clientX = Math.min(this.props.maxBounds[0], clientX);
+			clientY = Math.min(this.props.maxBounds[1], clientY);
+		}
+
 		// Update top and left
 		this.setState({
 			clientX: clientX,
diff --git a/specs/draggable.spec.js b/specs/draggable.spec.js
index 389418a9..43cb8280 100644
--- a/specs/draggable.spec.js
+++ b/specs/draggable.spec.js
@@ -28,6 +28,8 @@ describe('react-draggable', function () {
 					handle=".handle"
 					cancel=".cancel"
 					grid={[10, 10]}
+					minBounds={[0, 0]}
+					maxBounds={[500, 500]}
 					zIndex={1000}
 					onStart={handleStart}
 					onDrag={handleDrag}
@@ -43,6 +45,8 @@ describe('react-draggable', function () {
 			expect(drag.props.handle).toEqual('.handle');
 			expect(drag.props.cancel).toEqual('.cancel');
 			expect(drag.props.grid).toEqual([10, 10]);
+			expect(drag.props.minBounds).toEqual([0, 0]);
+			expect(drag.props.maxBounds).toEqual([500, 500]);
 			expect(drag.props.zIndex).toEqual(1000);
 			expect(drag.props.onStart).toEqual(handleStart);
 			expect(drag.props.onDrag).toEqual(handleDrag);
@@ -155,4 +159,4 @@ describe('react-draggable', function () {
 			expect(error).toEqual(true);
 		});
 	});
-});
\ No newline at end of file
+});

From e162c006d219ed82402eafd8eaf5582a5cd36355 Mon Sep 17 00:00:00 2001
From: Jonathan Lehman <jonathan.lehman91@gmail.com>
Date: Thu, 12 Feb 2015 09:09:06 -0500
Subject: [PATCH 2/2] Update min/max bounds example for clarity

---
 example/index.html | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/example/index.html b/example/index.html
index 998c31ff..c73c7b55 100644
--- a/example/index.html
+++ b/example/index.html
@@ -109,8 +109,10 @@ <h1>React Draggable</h1>
           <Draggable grid={[50, 50]}>
             <div className="box">I snap to a 50 x 50 grid</div>
           </Draggable>
-          <Draggable minBounds={[0, 0]} maxBounds={[500, 500]}>
-            <div className="box">I am bound to the left and top at 0px and right and bottom at 500px</div>
+          <Draggable start={[250, 250]} minBounds={[0, 0]} maxBounds={[500, 500]}>
+            <div className="box">
+              <div>I am bound to the left and top at 0 and right and bottom at 500 relative to my starting point of (250, 250).</div>
+            </div>
           </Draggable>
         </div>
       );