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;
}