fix bug: when 2x2 or 1x2 collosion bug for horizontal

xinfei1 · xinfei1 · commit 44a5e56d6e3e · 2020-08-14T19:32:33.000+08:00
diff --git a/README.md b/README.md
@@ -1,33 +1,49 @@
 ## react-grid-layout-between
-A draggable grid layout , can between two or more Layouts, for React. 
-Based on React-DnD,support to switch Compaction Type: horizontal || vertical.
+![react 16.8.6](https://img.shields.io/badge/react-%5E16.8.6-brightgreen.svg)
+![npm 6.9.0](https://img.shields.io/badge/npm-v6.9.0-blue.svg)
+![react-dnd](https://img.shields.io/badge/reactDnD-%5E2.6.0-7289da.svg)
+
+A draggable grid layout , can between two or more Layouts, for React. Based on [React-DnD](https://github.com/react-dnd/react-dnd).
 
 Live Demo : http://demo.sunxinfei.com/
 
-feature:
+Features:
+
+- [x] DnD widgets between layouts
+
+- [x] 100% React
+
+- [x] Draggable widgets
+
+- [x] Configurable packing: horizontal, vertical
 
-- [x] DnD card between layouts
+- [x] Bounds checking for dragging
 
-- [x] switch horizontal || vertical layout
+- [x] Responsive breakpoints
 
-- [x] auto layout when window resize
+- [x] Separate layouts per responsive breakpoint
 
-- [x] add drag preview
+- [x] Grid Items placed using CSS Transforms
 
-- [ ] Drag card colliseion by gravity center
+- [x] Drag Custom Preview
 
-- [ ] add static card
+- [ ] Drag widgets colliseion by gravity center
 
-- [ ] add MultiDrag
+- [ ] Static widgets
 
-- [ ] get <reac-grid-layout-between /> component
+- [ ] Resizable widgets
+
+- [ ] get `<reac-grid-layout-between />` component
 
 bugs:
-- [ ] when 2x2 or 1x2 collosion bug for horizontal
+- [x] ~~when 2x2 or 1x2 collosion bug for horizontal~~
+
 ### Run Project
+
 ```
 npm install
 ```
+
 ```
 npm run start
 ```
diff --git a/public/index.html b/public/index.html
@@ -23,6 +23,9 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div style="margin: 10px;">
+      <a target="_blank" href="https://github.com/SunXinFei/react-grid-layout-between">View project on GitHub</a>
+    </div>
     <div id="root"></div>
     <!--
       This HTML file is a template.
diff --git a/src/components/groupItem.jsx b/src/components/groupItem.jsx
@@ -69,7 +69,6 @@ class Demo extends Component {
 		}
 		if (this.props.layout.containerWidth !== clientWidth) {
 			this.props.handleLoad();
-			// console.log('handle');
 		}
 	}
   //创建卡片
diff --git a/src/utils/collision.js b/src/utils/collision.js
@@ -45,12 +45,9 @@ export const layoutCheck = (function () {
 		fristItemID,
 		compactType = 'vertical'
 	) {
-		let keyArr = [];
-		let movedItem = [];
-		let axis = 'gridx';
-		if (compactType === "vertical") {
-			axis = "gridy"
-		}
+		let keyArr = [],
+		movedItem = [];
+		const axis = compactType === "vertical"? "gridy": 'gridx';
 
 		let newlayout = layout.map((item, index) => {
 			if (item.id !== cardID) {
@@ -59,12 +56,7 @@ export const layoutCheck = (function () {
 					keyArr.push(item.id);
 					let offsetXY = item[axis] + 1;
 					// 移动模块位于循环检测方块中
-					let widthOrHeight = 0;
-					if (axis === "gridx") {
-						widthOrHeight = item.width;
-					} else {
-						widthOrHeight = item.height;
-					}
+					const widthOrHeight = axis === "gridx"? item.width: item.height;
 					//判断当前卡片的坐标和目标卡片加上宽度/高度是否有重叠，防止重叠产生
 					//在vertical情况下，是判断类似拖拽(0,1)宽1高1的方块与(0,0)宽1高2的纵向长方形，此时的交叠，纵向长方形保持不动，
 					//在horizontal情况下，是判断类似拖拽(1,0)宽1高1的方块与(0,0)宽2高1的横向长方形，此时的交叠，横向长方形保持不动，
diff --git a/src/utils/compact.js b/src/utils/compact.js
@@ -89,28 +89,19 @@ const getSpaceArea = (finishedLayout, item, cols) => {
  * 需优化的地方：如果移动中的卡片坐标应该一直在一个区域范围内，而不应该任意位置拖拽
  * @param {Array} layout
  * @param {Int} cols
- * @param {String} movingCardID 移动中的元素
- * @returns {layout} 最新layout布局
+ * @param {Object} moveCard 移动中的元素
+ * @returns {Array} 最新layout布局
  */
-export const compactLayoutHorizontal = function (layout, cols, movingCardID) {
+export const compactLayoutHorizontal = function (layout, cols, moveCard) {
 	let sorted = sortLayout(layout);
 	const compareList = [];
-	const needCompact = Array(layout.length);
-	let arr = [];
-	let moveCard;
-	//进行坐标重置，移动中的卡片除外
-	for (let i = 0; i < sorted.length; i++) {
-		if (movingCardID === sorted[i].id) {
-			moveCard = sorted[i];
-			continue;
-		}
-		arr.push(sorted[i]);
-	}
-	//获得当前组内的最大的y值，并赋值给移动卡片，防止分组Y值无限变大
+	const needCompact = new Array(layout.length);
+	const movingCardID = moveCard ? moveCard.id : null;
+	//获得当前组内的最大的y值，并赋值给移动卡片，防止group的Y值（高度）无限变大
 	if (moveCard) {
-		moveCard.gridy = Math.min(layoutBottom(arr), moveCard.gridy);
+		moveCard.gridy = Math.min(layoutBottom(sorted), moveCard.gridy);
 	}
-	//将非移动的卡片进行坐标重置
+	//将非移动中的卡片进行坐标重置
 	for (let i = 0; i < sorted.length; i++) {
 		if (movingCardID !== sorted[i].id) {
 			sorted[i].gridy = 0;
@@ -120,11 +111,11 @@ export const compactLayoutHorizontal = function (layout, cols, movingCardID) {
 	//进行重新放置，移动中卡片除外
 	for (let i = 0, length = sorted.length; i < length; i++) {
 		let finished;
-		if (movingCardID === sorted[i].id) {
-			finished = sorted[i];
-		} else {
-			finished = getSpaceArea(compareList, sorted[i], cols);
-		}
+		// if (movingCardID === sorted[i].id) {
+		// finished = sorted[i];
+		// } else {
+		finished = getSpaceArea(compareList, sorted[i], cols);
+		// }
 		compareList.push(finished);
 		needCompact[i] = finished;
 	}
@@ -156,35 +147,4 @@ export const compactLayoutHorizontal = function (layout, cols, movingCardID) {
 // 		needCompact[i] = finished;
 // 	}
 // 	return needCompact;
-// };
-
-// export const compactLayoutHorizontal = function( layout, cols ){
-//     let sorted = sortLayout(layout);
-//     const compareList = []
-//     const needCompact = Array(layout.length)
-
-//     for(let i=0;i<sorted.length;i++){
-//         sorted[i].gridy = 0;
-//         sorted[i].gridx = 0;
-//     }
-//     let rowCount = 0;
-//     for(let i=0, length=sorted.length; i<length; i++){
-//         //获得某行已存在卡片的最大累加宽度
-//         const compareListRow = _.filter(compareList,(c)=>{
-//             return c.gridy == rowCount
-//         });
-//         const ll = layoutHorizontalRowLength(compareListRow);
-//         //如果当前最大宽度加上当前卡片宽度大于cols，则放入下一行，
-//         //否则设置gridx
-//         if(ll+sorted[i].width > cols){
-//             rowCount++;
-//             sorted[i].gridy = rowCount;
-//         }else{
-//             sorted[i].gridy = rowCount;
-//             sorted[i].gridx = ll;
-//         }
-//         compareList.push(sorted[i]);
-//         needCompact[i] = sorted[i];
-//     }
-//     return needCompact;
-// }
+// };
diff --git a/src/views/content.jsx b/src/views/content.jsx

Original file line number	Diff line number	Diff line change
`@@ -69,7 +69,6 @@ class Demo extends Component {`
`69`	`69`	`}`
`70`	`70`	`if (this.props.layout.containerWidth !== clientWidth) {`
`71`	`71`	`this.props.handleLoad();`
`72`		`- // console.log('handle');`
`73`	`72`	`}`
`74`	`73`	`}`
`75`	`74`	`//创建卡片`