新增演示图，超出范围的bug

app/src/App.js

@@ -273,7 +273,7 @@ class DraggerLayout extends React.Component {
         }
     }
 
-    static PropTypes = {
+    static propTypes = {
         /**外部属性 */
         layout: PropTypes.array,
         col: PropTypes.number,
@@ -359,7 +359,7 @@ class DraggerLayout extends React.Component {
                 GridY={GridYMoving}
                 w={wMoving}
                 h={hMoving}
-                style={{ background: '#a31', zIndex: -1, transition: ' all .15s' }}
+                style={{ background: '#ffccc7', zIndex: -1, transition: ' all .15s' }}
                 isUserMove={!placeholderMoving}
             >
             </GridItem >
@@ -396,7 +396,6 @@ class DraggerLayout extends React.Component {
                 onDragEnd={this.onDragEnd}
                 index={index}
                 isUserMove={renderItem.isUserMove}
-                style={{ background: '#329' }}
                 UniqueKey={child.key}
             >
                 {child}
@@ -411,7 +410,7 @@ class DraggerLayout extends React.Component {
         return (
             <div
                 className={stringJoin('DraggerLayout', className)}
-                style={{ left: 100, width: width, height: containerHeight, border: '1px solid black' }}
+                style={{ left: 100, width: width, height: containerHeight }}
             >
                 {React.Children.map(this.props.children,
                     (child, index) => this.getGridItem(child, index)
@@ -426,9 +425,9 @@ export default class LayoutDemo extends React.Component {
 
     render() {
         return (
-            <DraggerLayout width={800} col={4} rowHeight={800 / 12} margin={[5, 5]}>
+            <DraggerLayout width={300} col={1} rowHeight={40} margin={[5, 5]} className='normal-layout'>
                 {['我', '叫', '做', '方', '正'].map((el, index) => {
-                    return (<div key={index} data-set={{ GridX: index*3, GridY: index*2, w: 1, h: 2 }}>{el}</div>)
+                    return (<div key={index} className='layout-item' data-set={{ GridX: 0, GridY: 1, w: 1, h: 2 }}>{el}</div>)
                 })}
             </DraggerLayout>
         )

app/src/Dragger.js

@@ -297,14 +297,10 @@ export default class Dragger extends React.Component {
                 {...others}
             >
                 {/**
-             *  React.cloneElement复制了所有的子元素，然后进行渲染，这样用户就可以使用
-             *  <drager>
-             *       something....
-             *  </drager>
              *
              *  React.Children.only 只允许子元素有一个根节点
              */}
-                {React.cloneElement(React.Children.only(this.props.children), {})}
+                {React.Children.only(this.props.children)}
             </div>
         )
     }

app/src/GridItem.js

@@ -26,7 +26,7 @@ export default class GridItem extends React.Component {
     }
 
 
-    static PropTypes = {
+    static propTypes = {
         /**外部容器属性 */
         col: PropTypes.number,
         containerWidth: PropTypes.number,
@@ -124,7 +124,7 @@ export default class GridItem extends React.Component {
         const { w, h, margin, style, bounds, GridX, GridY } = this.props
         const { x, y } = this.calGridItemPosition(this.props.GridX, this.props.GridY)
 
-        const { wPx, hPx } = this.calWHtoPx(w, h)
+        const { wPx, hPx } = this.calWHtoPx(w, h);
         return (
             <Dragger
                 style={{
@@ -138,7 +138,7 @@ export default class GridItem extends React.Component {
                 y={y}
                 isUserMove={this.props.isUserMove}
             >
-                <div >
+                <div style={{ width: wPx, height: hPx }}>
                     {React.Children.map(this.props.children, (child) => child)}
                 </div>
             </Dragger>

app/src/index.js

@@ -13,4 +13,72 @@ ReactDOM.render(
 
 document.body.addEventListener('touchmove', function (event) {
     event.preventDefault();
-}, false);
+}, false);
+
+// const ThemeContext = React.createContext();
+
+// class ThemeProvider extends React.Component {
+//     state = {
+//         theme: "dark",
+//         color: "blue"
+//     };
+
+//     changeTheme = theme => {
+//         this.setState({
+//             theme
+//         });
+//     };
+
+//     changeColor = color => {
+//         this.setState({
+//             color
+//         });
+//     };
+
+//     render() {
+//         return (
+//             <ThemeContext.Provider
+//                 value={{
+//                     theme: this.state.theme,
+//                     color: this.state.color,
+//                     changeColor: this.changeColor
+//                 }}
+//             >
+//                 <button onClick={() => this.changeTheme("light")}>change theme</button>
+//                 {this.props.children}
+//             </ThemeContext.Provider>
+//         );
+//     }
+// }
+// const SubComponent = props => (
+//     <div>
+//         <div>{props.theme}</div>
+//         <button onClick={() => props.changeColor("red")}>change color</button>
+//         <div>{props.color}</div>
+//         <ThemeContext.Consumer>
+//             {context => (
+//                 <div>{context.theme}{context.color}{context.changeColor}
+//                 </div>
+//             )}
+//         </ThemeContext.Consumer>
+//     </div>
+// );
+// class App extends React.Component {
+//     render() {
+//         return (
+//             <ThemeProvider>
+//                 <ThemeContext.Consumer>
+//                     {context => (
+//                         <SubComponent
+//                             theme={context.theme}
+//                             color={context.color}
+//                             changeColor={context.changeColor}
+//                         />
+//                     )}
+//                 </ThemeContext.Consumer>
+//             </ThemeProvider>
+//         );
+//     }
+// }
+
+// ReactDOM.render(<App />, document.getElementById("root"));

app/src/style.css

@@ -12,4 +12,17 @@
 .DraggerLayout {
     -webkit-transition: all .15s;
     transition: all .15s;
+}
+
+.normal-layout {
+    border: 1px solid black;
+}
+
+.layout-item {
+    background: #391085;
+    height: 100%;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }

package-lock.json

@@ -1575,16 +1575,6 @@
         "sha.js": "2.4.8"
       }
     },
-    "create-react-class": {
-      "version": "15.6.0",
-      "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.0.tgz",
-      "integrity": "sha1-q0SEl8JlZuHilBPogyB9V8/nvtQ=",
-      "requires": {
-        "fbjs": "0.8.12",
-        "loose-envify": "1.3.1",
-        "object-assign": "4.1.1"
-      }
-    },
     "crypto-browserify": {
       "version": "3.11.0",
       "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.11.0.tgz",
@@ -4900,15 +4890,45 @@
       "dev": true
     },
     "react": {
-      "version": "15.6.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-15.6.1.tgz",
-      "integrity": "sha1-uqhDTsZ4C96ZfNw4C3nNM7ljk98=",
+      "version": "16.3.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.3.0-alpha.1.tgz",
+      "integrity": "sha512-ukD/yaNKHAZLYMAHuwvIdxlb1HQovrRxmrQDHw2MNxyKlOoELJzMUdFh8bsLwheV05zqQ5nHbL5zEuVjcH3nwA==",
       "requires": {
-        "create-react-class": "15.6.0",
-        "fbjs": "0.8.12",
+        "fbjs": "0.8.16",
         "loose-envify": "1.3.1",
         "object-assign": "4.1.1",
-        "prop-types": "15.5.10"
+        "prop-types": "15.6.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "1.2.7",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+        },
+        "fbjs": {
+          "version": "0.8.16",
+          "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz",
+          "integrity": "sha1-XmdDL1UNxBtXK/VYR7ispk5TN9s=",
+          "requires": {
+            "core-js": "1.2.7",
+            "isomorphic-fetch": "2.2.1",
+            "loose-envify": "1.3.1",
+            "object-assign": "4.1.1",
+            "promise": "7.3.1",
+            "setimmediate": "1.0.5",
+            "ua-parser-js": "0.7.12"
+          }
+        },
+        "prop-types": {
+          "version": "15.6.0",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.0.tgz",
+          "integrity": "sha1-zq8IMCL8RrSjX2nhPvda7Q1jmFY=",
+          "requires": {
+            "fbjs": "0.8.16",
+            "loose-envify": "1.3.1",
+            "object-assign": "4.1.1"
+          }
+        }
       }
     },
     "react-deep-force-update": {
@@ -4918,14 +4938,45 @@
       "dev": true
     },
     "react-dom": {
-      "version": "15.6.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.6.1.tgz",
-      "integrity": "sha1-LLDtQZEDjlPCCes6eaI+Kkz5lHA=",
+      "version": "16.3.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.3.0-alpha.1.tgz",
+      "integrity": "sha512-1HYvdyslO5D0d6C1mGqzyz7V+wzjLcUcj14a7DEEseV3eEn6fPvq4wAGHguG+QbXHkelrrkxh2sgLr/vFA0UYA==",
       "requires": {
-        "fbjs": "0.8.12",
+        "fbjs": "0.8.16",
         "loose-envify": "1.3.1",
         "object-assign": "4.1.1",
-        "prop-types": "15.5.10"
+        "prop-types": "15.6.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "1.2.7",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+        },
+        "fbjs": {
+          "version": "0.8.16",
+          "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz",
+          "integrity": "sha1-XmdDL1UNxBtXK/VYR7ispk5TN9s=",
+          "requires": {
+            "core-js": "1.2.7",
+            "isomorphic-fetch": "2.2.1",
+            "loose-envify": "1.3.1",
+            "object-assign": "4.1.1",
+            "promise": "7.3.1",
+            "setimmediate": "1.0.5",
+            "ua-parser-js": "0.7.12"
+          }
+        },
+        "prop-types": {
+          "version": "15.6.0",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.0.tgz",
+          "integrity": "sha1-zq8IMCL8RrSjX2nhPvda7Q1jmFY=",
+          "requires": {
+            "fbjs": "0.8.16",
+            "loose-envify": "1.3.1",
+            "object-assign": "4.1.1"
+          }
+        }
       }
     },
     "react-hot-loader": {

package.json

@@ -29,7 +29,7 @@
     "babel-plugin-transform-react-jsx": "^6.24.1",
     "babel-plugin-transform-runtime": "^6.23.0",
     "prop-types": "^15.5.10",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1"
+    "react": "^16.3.0-alpha.1",
+    "react-dom": "^16.3.0-alpha.1"
   }
 }