Allow arbitrary bounds selector

Author: STRML

example/index.html

@@ -4,6 +4,10 @@
   <meta charset="utf-8"/>
   <title>React Draggable</title>
   <style type="text/css">
+    html, body {
+      height: 100%;
+    }
+
     body {
       color: #222;
       font-family: "Helvetica Neue", sans-serif;
@@ -142,6 +146,11 @@ <h1>React Draggable</h1>
               </div>
             </Draggable>
           </div>
+          <Draggable bounds="body" {...drags}>
+            <div className="box">
+              I can only be moved within the confines of the body element.
+            </div>
+          </Draggable>
           <Draggable>
             <div className="box" style={{position: 'absolute', bottom: '100px', right: '100px'}} {...drags}>
               I already have an absolute position.

lib/Draggable.es6

@@ -61,7 +61,8 @@ export default class Draggable extends DraggableCore {
         top: PropTypes.Number,
         bottom: PropTypes.Number
       }),
-      PropTypes.oneOf(['parent', false])
+      PropTypes.string,
+      PropTypes.oneOf([false])
     ]),
 
     /**

lib/utils/positionFns.es6

@@ -8,19 +8,25 @@ export function getBoundPosition(draggable, clientX, clientY) {
 
   let bounds = JSON.parse(JSON.stringify(draggable.props.bounds));
   let node = ReactDOM.findDOMNode(draggable);
-  let parent = node.parentNode;
 
-  if (bounds === 'parent') {
+  if (typeof bounds === 'string') {
+    let boundNode;
+    if (bounds === 'parent') {
+      boundNode = node.parentNode;
+    } else {
+      boundNode = document.querySelector(bounds);
+      if (!boundNode) throw new Error('Bounds selector "' + bounds + '" could not find an element.');
+    }
     let nodeStyle = window.getComputedStyle(node);
-    let parentStyle = window.getComputedStyle(parent);
+    let boundNodeStyle = window.getComputedStyle(boundNode);
     // Compute bounds. This is a pain with padding and offsets but this gets it exactly right.
     bounds = {
-      left: -node.offsetLeft + int(parentStyle.paddingLeft) +
+      left: -node.offsetLeft + int(boundNodeStyle.paddingLeft) +
             int(nodeStyle.borderLeftWidth) + int(nodeStyle.marginLeft),
-      top: -node.offsetTop + int(parentStyle.paddingTop) +
+      top: -node.offsetTop + int(boundNodeStyle.paddingTop) +
             int(nodeStyle.borderTopWidth) + int(nodeStyle.marginTop),
-      right: innerWidth(parent) - outerWidth(node) - node.offsetLeft,
-      bottom: innerHeight(parent) - outerHeight(node) - node.offsetTop
+      right: innerWidth(boundNode) - outerWidth(node) - node.offsetLeft,
+      bottom: innerHeight(boundNode) - outerHeight(node) - node.offsetTop
     };
   }