basic layout done

app/src/App.js

@@ -27,7 +27,7 @@ const syncLayout = (layout, childIndex, { GridX, GridY }, isUserMove) => {
 const collision = (a, b) => {
     if (a.GridX === b.GridX && a.GridY === b.GridY &&
         a.w === b.w && a.h === b.h) {
-            return false
+        return true
     }
 
     if (a.GridX + a.w <= b.GridX) return false
@@ -38,25 +38,28 @@ const collision = (a, b) => {
     return true
 }
 
-const layoutCheck = (layout, layoutItem, index, movingY) => {
+const layoutCheck = (layout, layoutItem, index, fristItemIndex) => {
     let i, movedItem
     let newlayout = layout.map((item, idx) => {
         if (idx !== index) {
             if (collision(item, layoutItem)) {
                 i = idx
                 let offsetY = layoutItem.GridY + layoutItem.h
-                // if (movingY > 0) offsetY = layoutItem.GridY + layoutItem.h
-                // if (movingY < 0) offsetY = layoutItem.GridY
                 movedItem = { ...item, GridY: offsetY, isUserMove: false }
                 return movedItem
             }
+        } else if (fristItemIndex === idx) {
+            return { ...item, GridX: layoutItem.GridX, GridY: layoutItem.GridY, isUserMove: true }
         }
         return item
     })
     /** 递归调用,将layout中的所有重叠元素全部移动 */
     if (typeof i === 'number' && typeof movedItem === 'object') {
-        newlayout = layoutCheck(newlayout, movedItem, i, 0)
+        
+        newlayout = layoutCheck(newlayout, movedItem, i, fristItemIndex)
+        console.log('检查这个layout:',newlayout)
     }
+
     return newlayout
 }
 
@@ -96,7 +99,7 @@ class DraggerLayout extends React.Component {
             GridY: GridY
         }, true)
 
-        console.log('placeholder', GridX, GridY)
+        console.log('placeholder', newlayout)
         this.setState({
             GridXMoving: GridX,
             GridYMoving: GridY,
@@ -112,14 +115,12 @@ class DraggerLayout extends React.Component {
 
         const subTmp = this.state.GridYMoving - layoutItem.GridY
 
-        const newLayout = layoutCheck(this.state.layout, layoutItem, index, subTmp)
+        const newLayout = layoutCheck(this.state.layout, layoutItem, index, index/*第一个物品的参数 */)
         this.setState({
             GridXMoving: layoutItem.GridX,
             GridYMoving: layoutItem.GridY,
             layout: newLayout
         })
-
-
     }
 
     onDragEnd(childIndex) {

app/src/Dragger.js

@@ -234,7 +234,6 @@ export default class Dragger extends React.Component {
         // console.log(nextProps)
         const { isUserMove } = this.props
         if (!isUserMove) {
-            console.log()
             if (typeof nextProps.x === 'number' &&
                 typeof nextProps.y === 'number') {
                 this.setState({

app/src/GridItem.js

@@ -71,9 +71,6 @@ export default class GridItem extends Component {
     /**给予一个grid的位置，算出元素具体的在容器中位置在哪里，单位是px */
     calGridItemPosition(GridX, GridY) {
         const { w, margin, col, containerWidth } = this.props
-
-
-
         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 + 1))
         return {