{"id":13403603,"url":"https://github.com/jbaysolutions/vue-grid-layout","last_synced_at":"2025-05-12T13:12:51.849Z","repository":{"id":37561701,"uuid":"61133599","full_name":"jbaysolutions/vue-grid-layout","owner":"jbaysolutions","description":"A draggable and resizable grid layout, for Vue.js.","archived":false,"fork":false,"pushed_at":"2024-05-09T07:00:58.000Z","size":14652,"stargazers_count":7280,"open_issues_count":267,"forks_count":1532,"subscribers_count":123,"default_branch":"master","last_synced_at":"2025-05-12T13:12:32.640Z","etag":null,"topics":["drag-and-drop","grid","grid-layout","resize","vue","vuejs2","widget"],"latest_commit_sha":null,"homepage":"https://jbaysolutions.github.io/vue-grid-layout/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jbaysolutions.png","metadata":{"files":{"readme":"README-zh_CN.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"jbaysolutions"}},"created_at":"2016-06-14T15:19:26.000Z","updated_at":"2025-05-12T12:29:33.000Z","dependencies_parsed_at":"2024-01-07T13:07:50.255Z","dependency_job_id":"7d93db93-b7d0-40ac-bd6b-067d299a75fa","html_url":"https://github.com/jbaysolutions/vue-grid-layout","commit_stats":{"total_commits":289,"total_committers":63,"mean_commits":4.587301587301587,"dds":"0.40138408304498274","last_synced_commit":"6e536767937fbde7f1f18435a185e2b9a00c27ef"},"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbaysolutions%2Fvue-grid-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbaysolutions%2Fvue-grid-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbaysolutions%2Fvue-grid-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbaysolutions%2Fvue-grid-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jbaysolutions","download_url":"https://codeload.github.com/jbaysolutions/vue-grid-layout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253745195,"owners_count":21957319,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["drag-and-drop","grid","grid-layout","resize","vue","vuejs2","widget"],"created_at":"2024-07-30T19:01:32.210Z","updated_at":"2025-05-12T13:12:51.664Z","avatar_url":"https://github.com/jbaysolutions.png","language":"JavaScript","funding_links":["https://github.com/sponsors/jbaysolutions"],"categories":["JavaScript","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","UI布局","Components \u0026 Libraries","UI Layout","Awesome Vue.js","UI Layout [🔝](#readme)","Uncategorized"],"sub_categories":["Libraries \u0026 Plugins","游览","UI Layout","Form","Tour","Uncategorized"],"readme":"\u003ch1 align=\"center\"\u003evue-grid-layout\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://www.npmjs.com/package/vue-grid-layout\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vue-grid-layout.svg\"/\u003e \u003cimg src=\"https://img.shields.io/npm/dm/vue-grid-layout.svg\"/\u003e\u003c/a\u003e \u003ca href=\"https://vuejs.org/\"\u003e\u003cimg src=\"https://img.shields.io/badge/vue-2.2.x-brightgreen.svg\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nvue-grid-layout是一个类似于[Gridster](http://dsmorse.github.io/gridster.js/)的栅格布局系统, 适用于Vue.js。 **灵感源自于 [React-Grid-Layout](https://github.com/STRML/react-grid-layout)**\n\n### **当前版本:** 2.4.0 (支持 Vue 2.2+)\n\n### **Vue 2.1.10 及以下请使用 [2.1.3](https://github.com/jbaysolutions/vue-grid-layout/tree/2.1.3)**\n### **Vue 1 请使用 [1.0.3](https://github.com/jbaysolutions/vue-grid-layout/tree/1.0.3)**\n\n\u003cbr/\u003e\n\n[**[在线演示](https://jbaysolutions.github.io/vue-grid-layout/examples/01-basic.html) | [更新日志](/CHANGELOG.md)**]\n\n[English](./README.md) | 简体中文\n\n\u003c!--\n## Table of Contents\n\n- [特性](#%e7%89%b9%e6%80%a7)\n- [入门指南](#%e5%85%a5%e9%97%a8%e6%8c%87%e5%8d%97)\n  - [安装](#%e5%ae%89%e8%a3%85)\n    - [npm](#npm)\n- [如何贡献](#%e5%a6%82%e4%bd%95%e8%b4%a1%e7%8c%ae)\n- [待办事项](#%e5%be%85%e5%8a%9e%e4%ba%8b%e9%a1%b9)\n\n## Demos\n\n\nTODO UPDATE DOCS\n\nUsed guide for vue cli build: https://medium.com/justfrontendthings/how-to-create-and-publish-your-own-vuejs-component-library-on-npm-using-vue-cli-28e60943eed3\nAlso check https://cli.vuejs.org/guide/build-targets.html#library\n\n--\u003e\n\n#### 成功案例\n\n- [DocsFold](https://www.docsfold.com/?utm_source=github\u0026utm_medium=web\u0026utm_campaign=vue-grid-layout)\n- [Draxed](https://www.draxed.com/?utm_source=github\u0026utm_medium=web\u0026utm_campaign=vue-grid-layout)\n- [Data Providers](https://www.dataproviders.io/?utm_source=github\u0026utm_medium=web\u0026utm_campaign=vue-grid-layout)\n- [Cataholic](https://cataholic.glitch.me/)\n\n*您还知悉其他项目? 请创建一个PR，谢谢!*\n\n## 特性\n\n* 可拖拽\n* 可调整大小\n* 静态部件（不可拖拽、调整大小）\n* 拖拽和调整大小时进行边界检查\n* 增减部件时避免重建栅格\n* 可序列化和还原的布局\n* 自动化 RTL 支持\n* 响应式\n\n\n## 入门指南\n\n### 安装\n\n#### npm\n\n    # 使用 npm\n\tnpm install vue-grid-layout --save\n\n    # 使用 yarn\n    yarn add vue-grid-layout\n\n\n引入\n\n```javascript\n    import VueGridLayout from 'vue-grid-layout';\n```\n\n加入到 Vue 组件\n\n ```javascript\n    export default {\n        components: {\n            GridLayout: VueGridLayout.GridLayout,\n            GridItem: VueGridLayout.GridItem\n        },\n    // ... data, methods, mounted (), etc.\n    }\n\n```\n\n#### 浏览器\n\n在页面中使用已打包好的 [文件](https://github.com/jbaysolutions/vue-grid-layout/releases)。 此时组件已为可用状态。\n\n```html\n    \u003cscript src=\"vue-grid-layout.umd.min.js\"\u003e\u003c/script\u003e\n```\n\n### 使用\n\n```javascript\n\tvar testLayout = [\n\t    {\"x\":0,\"y\":0,\"w\":2,\"h\":2,\"i\":\"0\"},\n\t    {\"x\":2,\"y\":0,\"w\":2,\"h\":4,\"i\":\"1\"},\n\t    {\"x\":4,\"y\":0,\"w\":2,\"h\":5,\"i\":\"2\"},\n\t    {\"x\":6,\"y\":0,\"w\":2,\"h\":3,\"i\":\"3\"},\n\t    {\"x\":8,\"y\":0,\"w\":2,\"h\":3,\"i\":\"4\"},\n\t    {\"x\":10,\"y\":0,\"w\":2,\"h\":3,\"i\":\"5\"},\n\t    {\"x\":0,\"y\":5,\"w\":2,\"h\":5,\"i\":\"6\"},\n\t    {\"x\":2,\"y\":5,\"w\":2,\"h\":5,\"i\":\"7\"},\n\t    {\"x\":4,\"y\":5,\"w\":2,\"h\":5,\"i\":\"8\"},\n\t    {\"x\":6,\"y\":3,\"w\":2,\"h\":4,\"i\":\"9\"},\n\t    {\"x\":8,\"y\":4,\"w\":2,\"h\":4,\"i\":\"10\"},\n\t    {\"x\":10,\"y\":4,\"w\":2,\"h\":4,\"i\":\"11\"},\n\t    {\"x\":0,\"y\":10,\"w\":2,\"h\":5,\"i\":\"12\"},\n\t    {\"x\":2,\"y\":10,\"w\":2,\"h\":5,\"i\":\"13\"},\n\t    {\"x\":4,\"y\":8,\"w\":2,\"h\":4,\"i\":\"14\"},\n\t    {\"x\":6,\"y\":8,\"w\":2,\"h\":4,\"i\":\"15\"},\n\t    {\"x\":8,\"y\":10,\"w\":2,\"h\":5,\"i\":\"16\"},\n\t    {\"x\":10,\"y\":4,\"w\":2,\"h\":2,\"i\":\"17\"},\n\t    {\"x\":0,\"y\":9,\"w\":2,\"h\":3,\"i\":\"18\"},\n\t    {\"x\":2,\"y\":6,\"w\":2,\"h\":2,\"i\":\"19\"}\n\t];\n\n\tnew Vue({\n\t    el: '#app',\n\t    data: {\n\t        layout: testLayout,\n\t    },\n\t});\n```\n\n\n```html\n\n    \u003cgrid-layout\n            :layout.sync=\"layout\"\n            :col-num=\"12\"\n            :row-height=\"30\"\n            :is-draggable=\"true\"\n            :is-resizable=\"true\"\n            :is-mirrored=\"false\"\n            :vertical-compact=\"true\"\n            :margin=\"[10, 10]\"\n            :use-css-transforms=\"true\"\n    \u003e\n\n        \u003cgrid-item v-for=\"item in layout\"\n                   :x=\"item.x\"\n                   :y=\"item.y\"\n                   :w=\"item.w\"\n                   :h=\"item.h\"\n                   :i=\"item.i\"\n                   :key=\"item.i\"\u003e\n            {{item.i}}\n        \u003c/grid-item\u003e\n    \u003c/grid-layout\u003e\n```\n\n\n### 文档\n\n#### 属性\n\n##### GridLayout\n\n* **layout**\n\n    * type: `Array`\n    * required: `true`\n\n    数据源。值必须为 `Array`，其数据项为 `Object`。 每条数据项必须有 `i`, `x`, `y`, `w` 和 `h` 属性。 请参考下面的 `GridItem`。\n\n* **responsiveLayouts**\n\n    * type: `Object`\n    * required: `false`\n    * default: `{}`\n\n    如果 `responsive` 设置为 `true`，该配置将作为栅格中每个断点的初始布局。键值是断点名称，每项的值都是类似 `layout` 属性定义的数据结构，值必须为 `Array`，其数据项为 `Object`。例如： `{lg: [layout items], md: [layout items]}`。需要注意的是，在创建栅格布局后设置该属性无效。\n\n* **colNum**\n\n    * type: `Number`\n    * required: `false`\n    * default: `12`\n\n    定义栅格系统的列数，其值需为自然数。\n\n* **rowHeight**\n\n    * type: `Number`\n    * required: `false`\n    * default: `150`\n\n    每行的高度，单位像素。\n\n* **maxRows**\n\n    * type: `Number`\n    * required: `false`\n    * default: `Infinity`\n\n    定义最大行数。\n\n* **margin**\n\n    * type: `Array`\n    * required: `false`\n    * default: `[10, 10]`\n\n    定义栅格中的元素边距。\n\n    值必须是包含两个 `Number`的数组，数组中第一个元素表示水平边距，第二个表示垂直边距，单位为像素。\n\n* **isDraggable**\n\n    * type: `Boolean`\n    * required: `false`\n    * default: `true`\n\n    标识栅格中的元素是否可拖拽。\n\n* **isResizable**\n\n    * type: `Boolean`\n    * required: `false`\n    * default: `true`\n\n    标识栅格中的元素是否可调整大小。\n\n* **isMirrored**\n\n    * type: `Boolean`\n    * required: `false`\n    * default: `false`\n\n    标识栅格中的元素是否可镜像反转。\n\n* **autoSize**\n\n    * type: `Boolean`\n    * required: `false`\n    * default: `true`\n\n    标识容器是否自动调整大小。\n\n* **verticalCompact**\n\n    * type: `Boolean`\n    * required: `false`\n    * default: `true`\n\n    标识布局是否垂直压缩。\n\n* **useCssTransforms**\n\n    * type: `Boolean`\n    * required: `false`\n    * default: `true`\n\n    标识是否使用CSS属性 `transition-property: transform;`。\n\n* **responsive**\n\n    * type: `Boolean`\n    * required: `false`\n    * default: `false`\n\n    标识布局是否为响应式。\n\n* **breakpoints**\n\n    * type: `Object`\n    * required: `false`\n    * default: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }\n\n    为响应式布局设置断点，其中参数代表不同设备的宽度：lg（large），md（medium），sm（small），xs（extra small）。\n\n* **cols**\n\n    * type: `Object`\n    * required: `false`\n    * default: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }\n\n    设置每个断点对应的列数。\n\n* **useStyleCursor**\n\n    * type: `Boolean`\n    * required: `false`\n    * default: `true`\n\n    标识是否使用动态鼠标指针样式。当拖动出现卡顿时，将此值设为 `false`也许可以缓解布局问题。\n\n * **preventCollision**\n\n    * type: `Boolean`\n    * default: `false`\n\n    值设置为ture时，栅格只能拖动至空白处。\n\n##### GridItem\n\n* **i**\n\n    * type: `String`\n    * required: `true`\n\n    栅格中元素的ID。\n\n* **x**\n\n    * type: `Number`\n    * required: `true`\n\n    标识栅格元素位于第几列，需为自然数。\n\n* **y**\n\n    * type: `Number`\n    * required: `true`\n\n    标识栅格元素位于第几行，需为自然数。\n\n* **w**\n\n    * type: `Number`\n    * required: `true`\n\n    标识栅格元素的初始宽度，值为`colWidth`的倍数。\n\n* **h**\n\n    * type: `Number`\n    * required: `true`\n\n    标识栅格元素的初始高度，值为`rowHeight`的倍数。\n\n* **minW**\n\n    * type: `Number`\n    * required: `false`\n    * default: `1`\n\n    栅格元素的最小宽度，值为`colWidth`的倍数。\n\n    如果`w`小于`minW`，则`minW`的值会被`w`覆盖。\n\n* **minH**\n\n    * type: `Number`\n    * required: `false`\n    * default: `1`\n\n    栅格元素的最小高度，值为`rowHeight`的倍数。\n\n    如果`h`小于`minH`，则`minH`的值会被`h`覆盖。\n\n* **maxW**\n\n    * type: `Number`\n    * required: `false`\n    * default: `Infinity`\n\n    栅格元素的最大宽度，值为`colWidth`的倍数。\n\n    如果`w`大于`maxW`，则`maxW`的值会被`w`覆盖。\n\n* **maxH**\n\n    * type: `Number`\n    * required: `false`\n    * default: `Infinity`\n\n    栅格元素的最大高度，值为`rowHeight`的倍数。\n\n    如果`h`大于`maxH`，则`maxH`的值会被`h`覆盖。\n\n* **isDraggable**\n\n    * type: `Boolean`\n    * required: `false`\n    * default: `null`\n\n    标识栅格元素是否可拖拽。如果值为`null`则取决于父容器。\n\n* **isResizable**\n\n    * type: `Boolean`\n    * required: `false`\n    * default: `null`\n\n    标识栅格元素是否可调整大小。如果值为`null`则取决于父容器。\n\n* **static**\n\n    * type: `Boolean`\n    * required: `false`\n    * default: `false`\n\n    标识栅格元素是否为静态的（无法拖拽、调整大小或被其他元素移动）。\n\n* **dragIgnoreFrom**\n\n    * type: `String`\n    * required: `false`\n    * default: `'a, button'`\n\n    标识栅格元素中哪些子元素无法触发拖拽事件，值为`css-like`选择器。\n\n    请参考 [interact.js docs](http://interactjs.io/docs/#ignorable-selectors)中的`ignoreFrom`。\n\n* **dragAllowFrom**\n\n    * type: `String`\n    * required: `false`\n    * default: `null`\n\n    标识栅格元素中哪些子元素可以触发拖拽事件，值为`css-like`选择器。\n\n    如果值为`null`则表示所有子元素（`dragIgnoreFrom`的除外）。\n\n    请参考 [interact.js docs](http://interactjs.io/docs/#ignorable-selectors)中的`allowFrom`。\n\n* **resizeIgnoreFrom**\n\n    * type: `String`\n    * required: `false`\n    * default: `'a, button'`\n\n    标识栅格元素中哪些子元素无法触发调整大小的事件，值为`css-like`选择器。\n\n    请参考 [interact.js docs](http://interactjs.io/docs/#ignorable-selectors)中的`ignoreFrom`。\n\n\n\n#### 事件\n\n每一个栅格元素`grid-item`上都可以添加监听器，用于监听移动和调整大小事件，这样父级Vue对象就可以收到通知。\n\n [示例](https://jbaysolutions.github.io/vue-grid-layout/examples/02-events.html)\n\n````html\n\n    \u003cgrid-layout\n            :layout=\"layout\"\n            :col-num=\"12\"\n            :row-height=\"30\"\n            :is-draggable=\"true\"\n            :is-resizable=\"true\"\n            :vertical-compact=\"true\"\n            :margin=\"[10, 10]\"\n            :use-css-transforms=\"true\"\n            @layout-created=\"layoutCreatedEvent\"\n            @layout-before-mount=\"layoutBeforeMountEvent\"\n            @layout-mounted=\"layoutMountedEvent\"\n            @layout-ready=\"layoutReadyEvent\"\n            @layout-updated=\"layoutUpdatedEvent\"\n    \u003e\n\n        \u003cgrid-item v-for=\"item in layout\"\n                   :x=\"item.x\"\n                   :y=\"item.y\"\n                   :w=\"item.w\"\n                   :h=\"item.h\"\n                   :i=\"item.i\"\n                   :key=\"item.i\"\n                   @resize=\"resizeEvent\"\n                   @move=\"moveEvent\"\n                   @resized=\"resizedEvent\"\n                   @moved=\"movedEvent\"\u003e\n            {{item.i}}\n        \u003c/grid-item\u003e\n    \u003c/grid-layout\u003e\n````\n\n* **layoutCreatedEvent**\n\n    对应Vue生命周期的`created`\n\n```javascript\n    layoutCreatedEvent: function(newLayout){\n      console.log(\"Created layout: \", newLayout)\n    }\n```\n\n* **layoutBeforeMountEvent**\n\n    对应Vue生命周期的`beforeMount`\n\n```javascript\n    layoutBeforeMountEvent: function(newLayout){\n      console.log(\"beforeMount layout: \", newLayout)\n    }\n```\n\n* **layoutMountedEvent**\n\n    对应Vue生命周期的`mounted`\n\n```javascript\n    layoutMountedEvent: function(newLayout){\n      console.log(\"Mounted layout: \", newLayout)\n    }\n```\n\n* **layoutReadyEvent**\n\n    当完成mount中的所有操作时生成的事件\n\n```javascript\n    layoutReadyEvent: function(newLayout){\n      console.log(\"Ready layout: \", newLayout)\n    }\n```\n\n* **layoutUpdatedEvent**\n\n    更新事件（布局更新或栅格元素的位置重新计算）\n\n```javascript\n    layoutUpdatedEvent: function(newLayout){\n      console.log(\"Updated layout: \", newLayout)\n    }\n```\n\n* **moveEvent**\n\n    移动时的事件\n\n```javascript\n    moveEvent: function(i, newX, newY){\n        console.log(\"MOVE i=\" + i + \", X=\" + newX + \", Y=\" + newY);\n    },\n```\n\n* **resizeEvent**\n\n    调整大小时的事件\n\n```javascript\n    resizeEvent: function(i, newH, newW, newHPx, newWPx){\n        console.log(\"RESIZE i=\" + i + \", H=\" + newH + \", W=\" + newW + \", H(px)=\" + newHPx + \", W(px)=\" + newWPx);\n    },\n```\n\n* **movedEvent**\n\n    移动后的事件\n\n```javascript\n    movedEvent: function(i, newX, newY){\n        console.log(\"MOVED i=\" + i + \", X=\" + newX + \", Y=\" + newY);\n    },\n```\n\n* **resizedEvent**\n\n    调整大小后的事件\n\n```javascript\n    /**\n     *\n     * @param i the item id/index\n     * @param newH new height in grid rows\n     * @param newW new width in grid columns\n     * @param newHPx new height in pixels\n     * @param newWPx new width in pixels\n     *\n     */\n    resizedEvent: function(i, newH, newW, newHPx, newWPx){\n        console.log(\"RESIZED i=\" + i + \", H=\" + newH + \", W=\" + newW + \", H(px)=\" + newHPx + \", W(px)=\" + newWPx);\n    },\n```\n\n\n## 如何贡献\n\n请提交issue或PR。\n\n\n## 待办事项\n\n- [x] 基础栅格布局\n- [x] 响应式\n- [x] 可拖拽的栅格元素\n- [x] 可调整大小的栅格元素\n- [x] 静态元素\n- [x] 每个元素的Min/max w/h\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjbaysolutions%2Fvue-grid-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjbaysolutions%2Fvue-grid-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjbaysolutions%2Fvue-grid-layout/lists"}