vue 网格布局_Vue.js的可拖动和可调整大小的网格布局

vue 网格布局

Vue网格布局 (vue-grid-layout)

vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired in React-Grid-Layout

vue-grid-layout是Vue.js的网格布局系统，例如Gridster。 在React-Grid-Layout中大受启发

View demo 查看演示 Download Source 下载源

使用vue-grid-layout的项目 (Projects using vue-grid-layout)

• Draxed

  德拉克斯

Know of others? Create a PR to let me know!

认识别人吗？ 建立公关让我知道！

特征 (Features)

• Draggable widgets

  可拖动的小部件

• Resizable widgets

  可调整大小的小部件

• Bounds checking for dragging and resizing

  边界检查以进行拖动和调整大小

• Widgets may be added or removed without rebuilding grid

  无需重建网格即可添加或删除小部件

• Layout can be serialized and restored

  布局可以序列化和还原

• Automatic RTL support

  自动RTL支持

入门 (Getting Started)

安装 (Installation)

Install the vue-grid-layout package package using npm:

使用npm安装vue-grid-layout 软件包 ：

npm install vue-grid-layout

用法 (Usage)

npm install vue-grid-layout

or include the script in your html (download from releases):

或将脚本包含在html中(从releases下载)：

<script src="vue-grid-layout.min.js"></script>

var testLayout = [
	    {"x":0,"y":0,"w":2,"h":2,"i":"0"},
	    {"x":2,"y":0,"w":2,"h":4,"i":"1"},
	    {"x":4,"y":0,"w":2,"h":5,"i":"2"},
	    {"x":6,"y":0,"w":2,"h":3,"i":"3"},
	    {"x":8,"y":0,"w":2,"h":3,"i":"4"},
	    {"x":10,"y":0,"w":2,"h":3,"i":"5"},
	    {"x":0,"y":5,"w":2,"h":5,"i":"6"},
	    {"x":2,"y":5,"w":2,"h":5,"i":"7"},
	    {"x":4,"y":5,"w":2,"h":5,"i":"8"},
	    {"x":6,"y":4,"w":2,"h":4,"i":"9"},
	    {"x":8,"y":4,"w":2,"h":4,"i":"10"},
	    {"x":10,"y":4,"w":2,"h":4,"i":"11"},
	    {"x":0,"y":10,"w":2,"h":5,"i":"12"},
	    {"x":2,"y":10,"w":2,"h":5,"i":"13"},
	    {"x":4,"y":8,"w":2,"h":4,"i":"14"},
	    {"x":6,"y":8,"w":2,"h":4,"i":"15"},
	    {"x":8,"y":10,"w":2,"h":5,"i":"16"},
	    {"x":10,"y":4,"w":2,"h":2,"i":"17"},
	    {"x":0,"y":9,"w"