[add] margin done

app/src/App.js

@@ -6,10 +6,26 @@ import './style.css'
 
 
 const MapLayoutTostate = (layout) => {
-    console.log('进来了', layout)
-    return layout
+    return layout.map((child) => {
+        let newChild = { ...child, isUserMove: true }
+        return newChild
+    })
 }
 
+const syncLayout = (layout, childIndex, { GridX, GridY }, isUserMove) => {
+    let newlayout = Object.assign([], layout)
+    for (let i = 0, length = newlayout.length; i < length; i++) {
+        if (i === childIndex) {
+            newlayout[i].GridX = GridX
+            newlayout[i].GridY = GridY
+            newlayout[i].isUserMove = isUserMove
+        }
+    }
+
+    return newlayout
+}
+
+
 class DraggerLayout extends React.Component {
     constructor(props) {
         super(props)
@@ -35,33 +51,47 @@ class DraggerLayout extends React.Component {
         hMoving: 0,
         placeholderShow: false,
         placeholderMoving: false,
-        layout: MapLayoutTostate(this.props.layout)
+        layout: MapLayoutTostate(this.props.layout),
+        transitionStyle: ''
     }
 
     onDragStart(bundles) {
-        const { GridX, GridY, w, h } = bundles
-        console.log(bundles)
+        const { GridX, GridY, w, h, index } = bundles
+        const newlayout = syncLayout(this.state.layout, index, {
+            GridX: GridX,
+            GridY: GridY
+        }, true)
+
+        console.log('placeholder', GridX, GridY)
         this.setState({
             GridXMoving: GridX,
             GridYMoving: GridY,
             wMoving: w,
             hMoving: h,
             placeholderShow: true,
-            placeholderMoving: true
+            placeholderMoving: true,
+            layout: newlayout,
+            transitionStyle:''
         })
     }
 
     onDrag(cor) {
+
         this.setState({
             GridXMoving: cor.GridX,
             GridYMoving: cor.GridY,
         })
     }
 
-    onDragEnd() {
-        console.log(this.state)
+    onDragEnd(childIndex) {
+        let Newlayout = syncLayout(this.state.layout, childIndex, {
+            GridX: this.state.GridXMoving,
+            GridY: this.state.GridYMoving
+        }, false)
         this.setState({
-            placeholderShow: false
+            placeholderShow: false,
+            layout: Newlayout,
+            transitionStyle:'.WrapDragger{-webkit-transition: all .3s;transition: all .3s;}'
         })
     }
     placeholder() {
@@ -79,7 +109,7 @@ class DraggerLayout extends React.Component {
                 GridY={GridYMoving}
                 w={wMoving}
                 h={hMoving}
-                style={{ background: '#a31' }}
+                style={{ background: '#a31', zIndex: -1,transition:' all .15s' }}
                 isUserMove={!placeholderMoving}
             >
             </GridItem >
@@ -105,6 +135,9 @@ class DraggerLayout extends React.Component {
                 onDrag={this.onDrag}
                 onDragStart={this.onDragStart}
                 onDragEnd={this.onDragEnd}
+                index={index}
+                isUserMove={layout[index].isUserMove}
+                style={{ background: '#329'}}
             >
                 {child}
             </GridItem >
@@ -118,6 +151,7 @@ class DraggerLayout extends React.Component {
                 className='DraggerLayout'
                 style={{ position: 'absolute', left: 100, width: 500, height: 500, border: '1px solid black' }}
             >
+                <style dangerouslySetInnerHTML={{ __html: this.state.transitionStyle }}></style>
                 {React.Children.map(this.props.children,
                     (child, index) => this.getGridItem(child, index)
                 )}
@@ -129,17 +163,20 @@ class DraggerLayout extends React.Component {
 
 export const LayoutDemo = () => {
     const layout = [{
-        GridX: 3, GridY: 4, w: 3, h: 2
+        GridX: 3, GridY: 4, w: 1, h: 3
+    }, {
+        GridX: 3, GridY: 5, w: 1, h: 3
     }, {
-        GridX: 1, GridY: 3, w: 3, h: 3
+        GridX: 4, GridY: 5, w: 1, h: 3
     }, {
-        GridX: 2, GridY: 5, w: 3, h: 3
+        GridX: 4, GridY: 5, w: 1, h: 3
     }]
     return (
         <DraggerLayout layout={layout}>
-            <p>absolute</p>
-            <p>black</p>
-            <p>children</p>
+            <p key='a'>absolute</p>
+            <p key='b'>black</p>
+            <p key='c'>children</p>
+            <p key='d'>children</p>
         </DraggerLayout>
     )
 }

app/src/Dragger.js

@@ -90,6 +90,8 @@ export default class Dragger extends React.Component {
         originX: 0,
         originY: 0,
 
+        isUserMove: true,
+
         /**已经移动的位移，单位是px */
         lastX: 0,
         lastY: 0
@@ -193,7 +195,7 @@ export default class Dragger extends React.Component {
             this.self = event.currentTarget
         }
 
-        this.props.onDragStart(this.state.x,this.state.y)
+        this.props.onDragStart(this.state.x, this.state.y)
 
         this.setState({
             originX: event.clientX,
@@ -228,6 +230,23 @@ export default class Dragger extends React.Component {
         }
     }
 
+    componentWillReceiveProps(nextProps) {
+        // console.log(nextProps)
+        const { isUserMove } = this.props
+        if (!isUserMove) {
+            if (typeof this.props.x === 'number' &&
+                typeof this.props.y === 'number') {
+                this.setState({
+                    x: this.props.x,
+                    y: this.props.y,
+                    lastX:this.props.x,
+                    lastY:this.props.y
+                })
+            }
+        }
+
+    }
+
     render() {
         let { x, y } = this.state
         const { bounds, style, className, others } = this.props

app/src/GridItem.js

@@ -37,7 +37,7 @@ export default class GridItem extends Component {
     }
 
     static defaultProps = {
-        col: 12,
+        col: 4,
         containerWidth: 500,
         containerPadding: [0, 0],
         margin: [10, 10],
@@ -49,24 +49,25 @@ export default class GridItem extends Component {
     /** 计算容器的每一个格子多大 */
     calColWidth() {
         const { containerWidth, col, containerPadding, margin } = this.props
-        return (containerWidth - containerPadding[0] * 2 - margin[0] * (col - 1)) / col
+        return (containerWidth - containerPadding[0] * 2 - margin[0] * (col + 1)) / col
     }
 
-    /**转化，计算网格的x,y值 */
+    /**转化，计算网格的GridX,GridY值 */
     calGridXY(x, y) {
-        const { margin } = this.props
-        let GridX = Math.round(x / (this.calColWidth() + margin[0]))
+        const { margin, containerWidth, col } = this.props
+        let GridX = Math.round(x / (containerWidth - margin[0] * (col + 1)) * col)
+        // let GridX = Math.round(x / (this.calColWidth() + margin[0]))
         let GridY = Math.round(y / (this.props.rowHeight + margin[1]))
         return { GridX, GridY }
     }
 
     /**给予一个grid的位置，算出元素具体的在容器中位置在哪里，单位是px */
     calGridItemPosition(GridX, GridY) {
-        const { margin, col } = this.props
+        const { margin, col, containerWidth } = this.props
         if (GridX > col - 1) GridX = col - 1
         if (GridX < 0) GridX = 0
 
-        let x = Math.round(GridX * this.calColWidth() + margin[0] * GridX)
+        let x = Math.round(GridX * (containerWidth - margin[0] * (col + 1)) / col + (GridX + 1) * margin[0])
         let y = Math.round(GridY * this.props.rowHeight + margin[1] * GridY)
         return {
             x: x,
@@ -76,18 +77,23 @@ export default class GridItem extends Component {
 
     /**宽和高计算成为px */
     calWHtoPx(w, h) {
-        const wPx = w * this.calColWidth()
-        const hPx = h * this.props.rowHeight
+        const { margin, containerPadding, containerWidth, col } = this.props
+
+        const one = (containerPadding[0] * 2 + containerWidth - margin[0] * (col + 1)) / col
+        console.log((containerWidth - margin[0] * (col + 1)) / col)
+
+        const wPx = Math.round(w * (containerWidth - margin[0] * (col + 1)) / col)
+        const hPx = Math.round(h * this.props.rowHeight)
 
         return { wPx, hPx }
     }
 
     onDragStart(x, y) {
-        console.log(x,y)
-        const { w, h } = this.props
+        const { w, h, index } = this.props
         const { GridX, GridY } = this.calGridXY(x, y)
+        console.log(GridX, GridY)
         this.props.onDragStart({
-            event, GridX, GridY, w, h
+            event, GridX, GridY, w, h, index
         })
     }
     onDrag(event, x, y) {
@@ -96,16 +102,16 @@ export default class GridItem extends Component {
     }
 
     onDragEnd() {
-        if (this.props.onDragEnd) this.props.onDragEnd()
+        if (this.props.onDragEnd) this.props.onDragEnd(this.props.index)
     }
 
     render() {
         const { x, y } = this.calGridItemPosition(this.props.GridX, this.props.GridY)
-        const { w, h, margin, style ,bounds } = this.props
+        const { w, h, margin, style, bounds } = this.props
         const { wPx, hPx } = this.calWHtoPx(w, h)
         return (
             <Dragger
-                style={{ ...style, width: wPx, height: hPx, margin: margin[0], position: 'absolute', border: '1px solid black' }}
+                style={{ ...style, width: wPx, height: hPx, position: 'absolute' }}
                 onDragStart={this.onDragStart}
                 onMove={this.onDrag}
                 onDragEnd={this.onDragEnd}

app/src/style.css

@@ -7,4 +7,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
+
 }
+.DraggerLayout{
+    -webkit-transition: all 3.3s;
+    transition: all 3.3s;
+}