nesting examples

Author: Gadzhi Kharkharov

examples/03 Nesting/Drag Sources/Container.js

@@ -9,7 +9,7 @@ import HTML5Backend from 'react-dnd/modules/backends/HTML5';
 export default class Container {
   render() {
     return (
-      <div style={{ height: 320 }}>
+      <div style={{ overflow: 'hidden', clear: 'both', margin: '-.5rem' }}>
         <div style={{ float: 'left' }}>
           <SourceBox color={Colors.BLUE}>
             <SourceBox color={Colors.YELLOW}>
@@ -22,7 +22,7 @@ export default class Container {
           </SourceBox>
         </div>
 
-        <div style={{ float: 'left', marginLeft: 100, marginTop: 50 }}>
+        <div style={{ float: 'left', marginLeft: '5rem', marginTop: '.5rem' }}>
           <TargetBox />
         </div>
       </div>

examples/03 Nesting/Drag Sources/SourceBox.js

@@ -5,7 +5,7 @@ import { DragSource } from 'react-dnd';
 const style = {
   border: '1px dashed gray',
   padding: '0.5rem',
-  margin: '0.5rem'
+  margin: '0.5rem',
 };
 
 const ColorSource = {
@@ -55,7 +55,7 @@ class SourceBox extends Component {
         <input type='checkbox'
                checked={forbidDrag}
                onChange={onToggleForbidDrag}>
-          Forbid drag
+          <small>Forbid drag</small>
         </input>
 
         {children}

examples/03 Nesting/Drag Sources/TargetBox.js

@@ -3,7 +3,7 @@ import { DropTarget } from 'react-dnd';
 import Colors from './Colors';
 
 const style = {
-  border: '1px dashed gray',
+  border: '1px solid gray',
   height: '15rem',
   width: '15rem',
   padding: '2rem',

examples/03 Nesting/Drop Targets/Box.js

@@ -5,7 +5,7 @@ import { DragSource } from 'react-dnd';
 const style = {
   display: 'inline-block',
   border: '1px dashed gray',
-  padding: '0.5rem',
+  padding: '0.5rem 1rem',
   backgroundColor: 'white',
   cursor: 'move'
 };

examples/03 Nesting/Drop Targets/Container.js

@@ -9,7 +9,7 @@ export default class Container {
   render() {
     return (
       <div>
-        <div style={{minHeight: '14rem', overflow: 'auto'}}>
+        <div style={{ overflow: 'hidden', clear: 'both', margin: '-1rem' }}>
           <Dustbin greedy>
             <Dustbin greedy>
               <Dustbin greedy />
@@ -23,7 +23,7 @@ export default class Container {
           </Dustbin>
         </div>
 
-        <div style={{ minHeight: '2rem' }}>
+        <div style={{ overflow: 'hidden', clear: 'both', marginTop: '1.5rem' }}>
           <Box />
         </div>
       </div>

examples/03 Nesting/Drop Targets/Dustbin.js

@@ -4,17 +4,17 @@ import { DropTarget } from 'react-dnd';
 
 function getStyle(backgroundColor) {
   return {
-    border: '2px dashed #ddd',
+    border: '1px solid rgba(0,0,0,0.2)',
     minHeight: '8rem',
     minWidth: '8rem',
     color: 'white',
     backgroundColor: backgroundColor,
     padding: '2rem',
-    marginRight: '0.5rem',
-    marginBottom: '0.5rem',
-    marginTop: '0.5rem',
+    paddingTop: '1rem',
+    margin: '1rem',
     textAlign: 'center',
-    float: 'left'
+    float: 'left',
+    fontSize: '1rem'
   };
 }
 
@@ -70,9 +70,9 @@ export default class Dustbin extends Component {
     return connectDropTarget(
       <div style={getStyle(backgroundColor)}>
         {text}
-
+        <br/>
         {hasDropped &&
-          <span> &middot; dropped {hasDroppedOnChild && ' on child'}</span>
+          <span>dropped {hasDroppedOnChild && ' on child'}</span>
         }
 
         <div>