layout fixed

app/src/App.js

@@ -4,6 +4,13 @@ import GridItem from './GridItem'
 
 import './style.css'
 
+const correctLayout = (layout) => {
+    for (let i = 0; i < layout.length; i++) {
+        if (collision(layout[i], layout[i + 1])) {
+            return layoutCheck(layout, layout[i], layout[i].key, layout[i].key, -1)
+        }
+    }
+}
 
 const layoutItemForkey = (layout, key) => {
     for (let i = 0, length = layout.length; i < length; i++) {
@@ -82,22 +89,16 @@ const compactItem = (finishedLayout, item) => {
     }
     /**
      * 类似一个递归调用
-     * 
      */
     while (true) {
-
         let FirstCollison = getFirstCollison(finishedLayout, newItem)
-
         if (FirstCollison) {
             newItem.GridY = FirstCollison.GridY + FirstCollison.h
             return newItem
         }
         newItem.GridY--
 
-        if (newItem.GridY < 0) {
-
-            return { ...newItem, GridY: 0 }
-        }
+        if (newItem.GridY < 0) return { ...newItem, GridY: 0 }
     }
     return newItem
 }
@@ -112,7 +113,6 @@ const compactLayout = (layout) => {
         compareList.push(finished)
         needCompact[layout.indexOf(sorted[i])] = finished
     }
-
     return needCompact
 }
 
@@ -174,7 +174,6 @@ const layoutCheck = (layout, layoutItem, key, fristItemkey, moving) => {
                     }
 
                 }
-
                 movedItem.push({ ...item, GridY: offsetY, isUserMove: false })
                 return { ...item, GridY: offsetY, isUserMove: false }
             }
@@ -296,11 +295,11 @@ class DraggerLayout extends React.Component {
     componentDidMount() {
         let that = this
         setTimeout(function () {
+            let layout = correctLayout(that.state.layout)
             that.setState({
-                layout: compactLayout(that.state.layout)
+                layout: compactLayout(layout)
             })
         }, 1);
-
     }
 
     getGridItem(child, index) {
@@ -350,13 +349,13 @@ class DraggerLayout extends React.Component {
 
 export const LayoutDemo = () => {
     const layout = [{
-        GridX: 3, GridY: 2, w: 3, h: 3
+        GridX: 0, GridY: 0, w: 3, h: 3
     }, {
-        GridX: 0, GridY: 2, w: 3, h: 3
+        GridX: 0, GridY: 0, w: 3, h: 3
     }, {
-        GridX: 3, GridY: 6, w: 3, h: 3
+        GridX: 0, GridY: 0, w: 3, h: 3
     }, {
-        GridX: 3, GridY: 8, w: 3, h: 3
+        GridX: 0, GridY: 0, w: 3, h: 3
     }, {
         GridX: 3, GridY: 8, w: 3, h: 3
     }, {

app/src/Dragger.js

@@ -56,12 +56,12 @@ export default class Dragger extends React.Component {
 
         /**
          * 是否由用户移动
-         * 可能是系统移动
+         * 可能是通过外部props改变
          */
         isUserMove: PropTypes.bool,
 
         /**
-         * 生命周期回掉
+         * 生命周期回调
          */
         onDragStart: PropTypes.func,
         onMove: PropTypes.func,
@@ -113,7 +113,7 @@ export default class Dragger extends React.Component {
             let NewBounds = typeof bounds !== 'string' ? bounds : parseBounds(bounds)
 
             /**
-             * 移动范围设定，永远移动 n 的倍数
+             * 网格式移动范围设定，永远移动 n 的倍数
              * 注意:设定移动范围的时候，一定要在判断bounds之前，否则会造成bounds不对齐
              */
             const { grid } = this.props
@@ -153,7 +153,7 @@ 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({
@@ -213,7 +213,7 @@ export default class Dragger extends React.Component {
         doc.removeEventListener('mousemove', this.move)
         doc.removeEventListener('mouseup', this.onDragEnd)
 
-        this.props.onDragEnd()
+        this.props.onDragEnd(event)
     }
 
     componentDidMount() {
@@ -231,7 +231,11 @@ export default class Dragger extends React.Component {
     }
 
     componentWillReceiveProps(nextProps) {
-        // console.log(nextProps)
+        /**
+         * 外部props 改变的时候更新元素的内部位置
+         * 这个api设计其实很不好
+         * 以后可能会修改掉
+         */
         const { isUserMove } = nextProps
         if (!isUserMove) {
             if (typeof nextProps.x === 'number' &&
@@ -239,8 +243,8 @@ export default class Dragger extends React.Component {
                 this.setState({
                     x: nextProps.x,
                     y: nextProps.y,
-                    lastX:nextProps.x,
-                    lastY:nextProps.y
+                    lastX: nextProps.x,
+                    lastY: nextProps.y
                 })
             }
         }
@@ -251,13 +255,13 @@ export default class Dragger extends React.Component {
         const { bounds, style, className, others } = this.props
 
         if (!this.props.isUserMove) {
-            /**当外部设置其x,y初始属性的时候，我们在这里设置元素的初始位移 */
+            /**当外部设置其props的x,y初始属性的时候，我们在这里设置元素的初始位移 */
             x = this.props.x
             y = this.props.y
         }
 
         /**主要是为了让用户定义自己的className去修改css */
-        let fixedClassName = typeof className === 'undefined' ? '' : className + ' '
+        const fixedClassName = typeof className === 'undefined' ? '' : className + ' '
         return (
             <div className={`${fixedClassName}WrapDragger`}
                 style={{ ...style, touchAction: 'none!important', transform: `translate(${x}px,${y}px)` }}

app/src/GridItem.js

@@ -61,9 +61,9 @@ export default class GridItem extends Component {
         let GridY = Math.round(y / (this.props.rowHeight + margin[1]))
 
         /**防止元素出container */
-        if (GridX + w > col - 1) GridX = col - w
-        if (GridX < 0) GridX = 0
-        if (GridY < 0) GridY = 0
+        if (GridX + w > col - 1) GridX = col - w //右边界
+        if (GridX < 0) GridX = 0//左边界
+        if (GridY < 0) GridY = 0//上边界
 
         return { GridX, GridY }
     }
@@ -71,7 +71,7 @@ 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 x = Math.round(GridX * this.calColWidth() + (GridX + 1) * margin[0])
         let y = Math.round(GridY * this.props.rowHeight + margin[1] * (GridY + 1))
         return {
             x: x,
@@ -98,7 +98,7 @@ export default class GridItem extends Component {
         })
     }
     onDrag(event, x, y) {
-        let { GridX, GridY } = this.calGridXY(x, y)
+        const { GridX, GridY } = this.calGridXY(x, y)
         const { w, h, col, UniqueKey } = this.props
         this.props.onDrag({ GridX, GridY, w, h }, UniqueKey)
     }
@@ -107,10 +107,6 @@ export default class GridItem extends Component {
         if (this.props.onDragEnd) this.props.onDragEnd(this.props.UniqueKey)
     }
 
-    componentWillReceiveProps(nextProps) {
-        // console.log(nextProps.isUserMove,nextProps.GridX,nextProps.GridY)
-    }
-
     render() {
         const { x, y } = this.calGridItemPosition(this.props.GridX, this.props.GridY)
         const { w, h, margin, style, bounds } = this.props