React-Grid-Layout和vue-grid-layout 總結

GIT地址

React-Grid-Layout ： https://github.com/react-grid-layout/react-grid-layout

vue-grid-layout   ：https://github.com/jbaysolutions/vue-grid-layout

兩個的配置基本一致，主要就是一個用於vue，一個用於react

GridLayout

vue-grid-layout

react-grid-layout

 

屬性	類型	是否必須（required）	默認值	描述		屬性	類型	是否必須（required）	默認值	描述
layout	Array	true		網格的初始布局。該值必須是Object項的數組。每個項目必須有i, x, y, w和h屬性		layout	Array	true		網格的初始布局。該值必須是Object項的數組。每個項目必須有i, x, y, w和h屬性
cols	Object	false	{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }	定義每個斷點的列數		cols	Object	false	{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }	cols映射
rowHeight	Number	false	150	表示一行的高度，單位是像素		rowHeight	Number	false	150	行有一個靜態高度，但是您可以根據斷點來更改這個高度
margin	Array	false	[10, 10]	表示網格內元素的邊距。 該值必須是一個雙元素的數字數組。每個值以像素表示。第一個元素是水平邊距，第二個元素是垂直邊距		margin	Array	false	[10, 10]	[x, y] 每項之間的邊距
isDraggable	Boolean	false	true	表示網格項是否可拖動		isDraggable	Boolean	false	true	表示網格項是否可拖動
isResizable	Boolean	false	true	表示網格項是否可調整大小		isResizable	Boolean	false	true	表示網格項是否可調整大小
autoSize	Boolean	false	true	為真時，容器的高度會自適應內容的高度		autoSize	Boolean	false	true	為真時，容器的高度會自適應內容的高度
preventCollision	Boolean	false	false	為true時，表示移動當前項時，其他項位置不發生變化，為false時，其他項會自動調整位置		preventCollision	Boolean	false	false	為true時，表示移動當前項時，其他項位置不發生變化，為false時，其他項會自動調整位置
useCssTransforms	Boolean	false	true	是否使用CSS 3 的translate() 來代替 position left/top（可加快渲染速度）		useCSSTransforms	Boolean	false	true	是否使用CSS 3 的translate() 來代替 position left/top（可加快渲染速度）
colNum	Number	false	12	表示網格有多少列。		width	Number	false		設置寬度，使用了WidthProvider時不用設置
responsiveLayouts	Object	false	{}	如果設置為true，這是每個斷點的網格初始布局。對象的鍵是斷點名，每個值都是一個由布局道具定義的對象項數組。例如:{lg:[布局項]，md:[布局項]}。在GridLayout創建之后設置該道具沒有任何效果。 也可看 responsive, breakpoints and cols		draggableCancel	string	false		取消拖動時被拖動項的類選擇器的名稱
maxRows	Number	false	Infinity	網格中最大的行數是多少		draggableHandle	string	false		拖動時被拖動項的類選擇器的名稱
isMirrored	Boolean	false	false	是否有鏡像		compactType	string	false	'vertical'	緊湊排列類型 vertical/horizontal
verticalCompact	Boolean	false	true	表示布局是否應該垂直緊湊		containerPadding	Array	false	[number, number]	項的內邊距
responsive	Boolean	false	false	表示布局是否應響應窗口寬度		droppingItem	Object	false	{ i: string, w: number, h: number }	放置元素的配置（放置元素即是當你拖動某一項時出現的虛擬元素）
breakpoints	Object	false	{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }	為響應式布局定義的斷點，該參數表示不同設備的寬度:lg(large)， md(medium)， sm(small)， xs(extra small)。設置列號改變時的寬度		isBounded	Boolean	false	false	是否設置邊界
useStyleCursor	Boolean	false	true	如果設為true。當拖拽凍結時，將該值設置為false可以緩解問題。此屬性不是反應性的		allowOverlap	Boolean	false	false	為true，網格可以放置一個在另一個之上。 如果設置了，意味着' preventCollision =true'
						isDroppable	Boolean	false	false	為true時，設置了draggable={true}屬性的項可以被放置入其他項 可以落在網格上。它觸發"onDrop"回調 在火狐下有特別的寫法 具體請參考https://github.com/react-grid-layout/react-grid-layout
						resizeHandles	Array	false	<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se']	設置重置大小的圖標出現的位置，默認是在右下角
						onLayoutChange	function		(layout: Layout) => void	布局發生變化的回調函數
						onDragStart	type ItemCallback = (layout: Layout, oldItem: LayoutItem, newItem: LayoutItem, placeholder: LayoutItem, e: MouseEvent, element: HTMLElement) => void			某一項開始拖動的回調函數  ItemCallback
						onDrag				某一項正在拖動中的回調函數  ItemCallback
						onDragStop				某一項停止拖動的回調函數  ItemCallback
						onResizeStart	type ItemCallback = (layout: Layout, oldItem: LayoutItem, newItem: LayoutItem, placeholder: LayoutItem, e: MouseEvent, element: HTMLElement) => void			某一項開始重置大小的回調函數
						onResize				某一項正在重置大小中的回調函數
						onResizeStop				某一項停止重置大小的回調函數
						onDrop			(layout: Layout, item: ?LayoutItem, e: Event) => void	當元素從外部放入網格時調用函數
						onDropDragOver			(e: DragOverEvent) => ?({|w?: number, h?: number|} | false)	當元素從外部拖動到網格上時調用的回調函數

                  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

　

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Grid item

vue						react

 

 

 

 

 

　

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

一些小方法

1.改變拖拽過程中，底色

vue

.vue-grid-item.vue-grid-placeholder {
  background: lightblue !important;
  border: 1px solid grey;
}

react

.react-grid-item.react-grid-placeholder {
     background: rgb(119, 146, 155) !important;
      border: 1px solid grey;
}