forked fromjbaysolutions/vue-grid-layout
- Notifications
You must be signed in to change notification settings - Fork0
A draggable and resizable grid layout, for Vue.js.
License
NotificationsYou must be signed in to change notification settings
ponach/vue-grid-layout
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
vue-grid-layout is a grid layout system, likeGridster, for Vue.js.Heavily inspired inReact-Grid-Layout
For Vue 2.1.10 and below use version2.1.3
For Vue 1 use version1.0.3
Know of others? Create a PR to let me know!
- 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
Install the vue-grid-layoutpackage package usingnpm:
npm install vue-grid-layoutnpm install vue-grid-layoutor include the script in your html (download fromreleases):
<scriptsrc="vue-grid-layout.min.js"></script>
vartestLayout=[{"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":2,"h":3,"i":"18"},{"x":2,"y":6,"w":2,"h":2,"i":"19"}];varGridLayout=VueGridLayout.GridLayout;varGridItem=VueGridLayout.GridItem;newVue({el:'#app',components:{ GridLayout, GridItem,},data:{layout:testLayout,},});
<grid-layout:layout="layout":col-num="12":row-height="30":is-draggable="true":is-resizable="true":vertical-compact="true":margin="[10, 10]":use-css-transforms="true"><grid-itemv-for="item in layout":x="item.x":y="item.y":w="item.w":h="item.h":i="item.i"> {{item.i}}</grid-item></grid-layout>
Move and resize event listeners can be added to each grid-item, so that the parent Vue can be notified when a grid element is being moved or resized.Moved and resized event listeners can be added, if the only notification needed is when an item is finished moving or resizing.
Working examplehere
<grid-layout:layout="layout":col-num="12":row-height="30":is-draggable="true":is-resizable="true":vertical-compact="true":margin="[10, 10]":use-css-transforms="true"><grid-itemv-for="item in layout":x="item.x":y="item.y":w="item.w":h="item.h":i="item.i"@resize="resizeEvent"@move="moveEvent"@resized="resizedEvent"@moved="movedEvent"> {{item.i}}</grid-item></grid-layout>
- Move event: every time an item is being moved and changes position
moveEvent:function(i,newX,newY){console.log("MOVE i="+i+", X="+newX+", Y="+newY);},
- Resize event: every time an item is being resized and changes size
resizeEvent:function(i,newH,newW){console.log("RESIZE i="+i+", H="+newH+", W="+newW);},
- Moved event: every time an item is finished being moved and changes position
movedEvent:function(i,newX,newY){console.log("MOVED i="+i+", X="+newX+", Y="+newY);},
- Resized event: every time an item is finished being resized and changes size
/** * *@param i the item id/index *@param newH new height in grid rows *@param newW new width in grid columns *@param newHPx new height in pixels *@param newWPx new width in pixels * */resizedEvent:function(i,newH,newW,newHPx,newWPx){console.log("RESIZED i="+i+", H="+newH+", W="+newW+", H(px)="+newHPx+", W(px)="+newWPx);},
If you have a feature request, please add it as an issue or make a pull request.
- Basic grid layout
- Responsive
- Draggable grid items
- Resizable grid items
- Static elements
- Min/max w/h per item
About
A draggable and resizable grid layout, for Vue.js.
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published
Languages
- Vue65.1%
- JavaScript34.5%
- HTML0.4%