[add] building grid system

app/src/App.js

@@ -1,46 +1,29 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Dragger from './Dragger.js'
+import GridItem from './GridItem'
 import { int, innerHeight, innerWidth, outerHeight, outerWidth, parseBounds, isNumber } from './utils'
 
 import './style.css'
 
 export default class CtmpFather extends React.Component {
 
-    onWindowResize(e){
+    onWindowResize(e) {
         console.log(this.node.clientWidth)
     }
-    componentDidMount(){
+    componentDidMount() {
         console.log(this.node)
         window.addEventListener('resize', this.onWindowResize.bind(this))
-        
+
     }
 
     render() {
         return (
             <div
                 className='shitWrap'
-                style={{ display: 'flex', left: 100, height: 300, border: '1px solid black' }}
+                style={{ position: 'absolute', left: 100, width: 500, height: 500, border: '1px solid black' }}
                 ref={(node) => this.node = node}
             >
-                <Dragger
-                    bounds='parent'
-                    style={{ height: 50, width: 50, padding: 10, margin: 10, border: '1px solid black' }}
-                    grid={[30, 30]}
-                >
-                    <div>
-                        <p>asdasdad</p>
-                        <p>asdasdad</p>
-                    </div>
-                </Dragger>
-                <Dragger
-                    style={{ height: 50, width: 50, padding: 10, margin: 10, border: '1px solid black' }}
-                    hasDraggerHandle={true}
-                >
-                    <div>
-                        <p className='handle' >asdasdad</p>
-                    </div>
-                </Dragger>
+                <GridItem/>
             </div>
         )
     }

app/src/Dragger.js

@@ -46,8 +46,16 @@ export default class Dragger extends React.Component {
          *      <div className={handle} >点击我拖动</div>
          * </Dragger>
          */
-        hasDraggerHandle: PropTypes.bool
+        hasDraggerHandle: PropTypes.bool,
+
+        /**
+         * 生命周期回掉
+         */
+        onDragStart:PropTypes.func,
+        onMove:PropTypes.func,
+        onDragEnd:PropTypes.func
     }
+    /** props end */
 
     /**
      * 初始变量设置
@@ -130,6 +138,8 @@ export default class Dragger extends React.Component {
         deltaX = this.props.allowX ? deltaX : 0
         deltaY = this.props.allowY ? deltaY : 0
 
+        /**移动时回掉 */
+        if(this.props.onMove)this.props.onMove(event,deltaX,deltaY)
 
         this.setState({
             x: deltaX,

app/src/GridItem.js

@@ -0,0 +1,54 @@
+import React from 'react'
+import { Component } from 'react'
+import PropTypes from 'prop-types'
+import Dragger from './Dragger'
+
+export default class GridItem extends Component {
+    constructor(props) {
+        super(props)
+        this.onDrag = this.onDrag.bind(this)
+        this.calGridXY = this.calGridXY.bind(this)
+        this.calColWidth = this.calColWidth.bind(this)
+    }
+
+
+    static PropTypes = {
+        col: PropTypes.number,
+        margin: PropTypes.number,
+        containerWidth: PropTypes.number,
+        containerPadding: PropTypes.number,
+    }
+
+    static defaultProps = {
+        col: 12,
+        containerWidth: 500
+    }
+
+    /** 计算容器的每一个格子多大 */
+    calColWidth() {
+        return this.props.containerWidth / this.props.col
+    }
+
+    /**转化，计算网格的x,y值 */
+    calGridXY(x, y) {
+        let GridX = Math.round(x / this.calColWidth())
+        let GridY = Math.round(y / this.calColWidth())
+        console.log(GridX, GridY)
+    }
+
+    onDrag(event, x, y) {
+        this.calGridXY(x, y)
+    }
+
+    render() {
+        return (
+            <Dragger
+                bounds='parent'
+                style={{ position: 'absolute', border: '1px solid black' }}
+                onMove={this.onDrag}
+            >
+                <p>asdasdas</p>
+            </Dragger>
+        )
+    }
+}

app/src/style.css

@@ -7,5 +7,4 @@
     display: flex;
     align-items: center;
     justify-content: center;
-
 }