jbaysolutions / vue-grid-layout Goto Github PK
View Code? Open in Web Editor NEWA draggable and resizable grid layout, for Vue.js.
Home Page: https://jbaysolutions.github.io/vue-grid-layout/
License: MIT License
A draggable and resizable grid layout, for Vue.js.
Home Page: https://jbaysolutions.github.io/vue-grid-layout/
License: MIT License
ie11 will bounce when dragging
I think a version that extends horizontally, instead of vertically, would be a useful feature. Are there any plans yet?
Why not add a remove button?
Hi,
I have buttons on my grid-items. When i'm using it on desktop it's working well. When i'm using it with tap on mobile or tablet the Buttons are not working. The drag and drop is working well on mobile and tablet, but the buttons can't be triggered.
Any idea how it can be fixed?
Many thanks for your great component.
Kind regards
Pascal
Hi all,
I've just stumbled across this vue library and I think it's brilliant, it's exactly what I'm looking for. I've been playing around with it and I'm having some problems. I'm attempting to get this simple example working and while everything renders just fine, I'm unable to drag and drop, or resize.
If I try and drag and drop, I get this error whenever I move the mouse around the page
Uncaught TypeError: Cannot read property 'pageX' of null
at InteractEvent (eval at (eval at (app.js:761)), :3473:57)
at Interaction.dragMove (eval at (eval at (app.js:761)), :1967:30)
at Interaction.pointerMove (eval at (eval at (app.js:761)), :1927:75)
at HTMLDocument.eval (eval at (eval at (app.js:761)), :3349:36)
and whenever I try to resize I get this error
Uncaught TypeError: Cannot set property 'h' of undefined
at VueComponent.resizeEvent (eval at (eval at (http://localhost:8080/app.js:761:1)), :250:17)
at VueComponent.boundFn [as resizeEvent] (eval at (http://localhost:8080/app.js:723:1), :124:14)
at Vue$3.self.resizeEventHandler (eval at (eval at (http://localhost:8080/app.js:761:1)), :105:18)
at Vue$3.Vue.$emit (eval at (eval at (http://localhost:8080/app.js:761:1)), :2545:16)
at Vue$3.e.(anonymous function) [as $emit] (chrome-extension://nhdogjmejiglipccpnnnanhbledajbpd/build/backend.js:1:6123)
at VueComponent.handleResize (eval at (eval at (http://localhost:8080/app.js:761:1)), :471:22)
at VueComponent.boundFn [as handleResize] (eval at (http://localhost:8080/app.js:723:1), :125:14)
at Array.eval (eval at (eval at (http://localhost:8080/app.js:761:1)), :313:30)
at Interactable.fire (eval at (eval at (http://localhost:8080/app.js:761:1)), :5007:33)
at Interaction.resizeStart (eval at (eval at (http://localhost:8080/app.js:761:1)), :2034:25)
resizeEvent @ GridLayout.vue?e8af:241
boundFn @ vue.esm.js?65d7:124
self.resizeEventHandler @ GridLayout.vue?e8af:96
Vue.$emit @ vue.common.js?e881:2545
e.(anonymous function) @ backend.js:1
handleResize @ GridItem.vue?a853:469
boundFn @ vue.esm.js?65d7:125
(anonymous) @ GridItem.vue?a853:311
fire @ interact.js?3c23:5007
resizeStart @ interact.js?3c23:2034
start @ interact.js?3c23:1764
pointerMove @ interact.js?3c23:1920
(anonymous) @ interact.js?3c23:3349
Here is the vue component I'm attempting to get working.
<template>
<div>
<div class="row">
<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-item :key='widget.widget_type' v-for="(widget,index) in widgets"
:x="widget.col_start"
:y="widget.row_start"
:w="widget.width"
:h="widget.height"
:i="index">
<div> steve </div>
</grid-item>
</grid-layout>
</div>
</div>
</template>
<script>
import VueLayout from 'vue-grid-layout'
export default {
name: 'dashboard',
components: {
'GridLayout': VueLayout.GridLayout,
'GridItem': VueLayout.GridItem
},
data () {
return {
widgets: [{ col_start: 1,
row_start: 1,
width: 2,
height: 2 },
{col_start: 3,
row_start: 3,
width: 2,
height: 2}],
layout: [
{'x': 1, 'y': 1, 'w': 5, 'h': 5, 'i': '0'},
{'x': 2, 'y': 2, 'w': 5, 'h': 5, 'i': '1'},
{'x': 3, 'y': 3, 'w': 5, 'h': 5, 'i': '2'},
{'x': 4, 'y': 4, 'w': 5, 'h': 5, 'i': '3'}
]
}
}
}
</script>
I also get this extra grid item on the page, even when my array of widgets is empty, not sure if it's related to that.
Any help would be greatly appreciated. I suspect I'm just doing something silly so fingers crossed.
I have a component is essentially a todo list, which expands down when a user enters a new task. Right now, when this is done, the list goes over the bottom of the GridItem component and causes a ton of issues when it is moved. Is there a way to prevent users from resizing items, but then to allow me to resize elements inside methods I've defined (such as my addTodoListItem()
method?
As the Vue.js documentation states, v-html cannot be used to pass components. That said, I am having difficulty using VueGridLayout because, in my layout, I'd like to allow users to add, remove, and interact with a wide variety of components.
Any thoughts on how I should approach this?
I have two questions. But first, thank for you this library, really enjoying it.
First Question:
I am writing some functions to dynamically add and remove grid items. I have been able to easily splice out grid items without a problem. When I add new grid items or duplicate they end up taking the same X, Y coordinates and are placed on top of the existing grid item or on another grid item. So when you drag or resize its essentially grabbing both the original grid item and the new one.
Has anyone solved this and how are you managing to add new grid items and place them into an empty spot? Essentially dynamic x and y coordinates to find an empty slot, or at least adding it to the very end.
I am considering some very robust functions that I feel are overkill that loops through the entire grid item array and counts the coordinates to find an open spot but before I wrote any of this I was curious how others have managed to accomplish this desired outcome. I feel brain dead and that im missing something quite simple ha.
Second Question:
I noticed that a ResponsiveGridLayout.vue file exists in the current repository, I tried getting it to work but couldn't. Is this feature not released yet or is there a working version? All is good I have been able to overwrite my mobile issues using css.
Thanks again.
I noticed there are 2 events in this package, problem is they get triggered all the time.
Is there a way to detect when 'resizing' or 'moving' is done? I am doing an AJAX call on resize but its getting a bit of lot of calls this way.
After I add or remove itemGrids, the itemGrid is not responsive, so the width of the grid doesn't update when I resize the main Window.
Also in your app when you add an item the item cannot be move.
Thanks
I have install vue-grid-layout of version 1.0.0,then I use
import VueGridLayout from 'vue-grid-layout';
to import vue-grid-layout,it has error:Uncaught SyntaxError: Unexpected token import.
the error code is
vue-grid-layout/src/app.js line 29
import GridItem from './GridItem.vue';
From my initial tests it doesn't seem to work correctly.
It's almost like the two grid layouts are sharing some state and working against one another.
Just want to know if it should be possible before I try and go deeper and figure out what I might be doing wrong.
Thanks
Vue-grid-layout is awesome,cool for free-draggable things!
But it seems that vue-grid-layout not be used in plugin-way as advised by Vuejs 2.x writer ,
It cannot used by Vue.use(require('vue-grid-layout'))
in Vue webpack project "globally"
So I had to requrie('vue-grid-layout')
every .Vue
file ,and declare
components: { //ResponsiveGridLayout, GridLayout, GridItem },
in every component file.
Unluckly,I use these snippets in entry file app.vue of the offical template for vuejs2.x ,it does not work,just render invisible blocks
---whole replace with App.vue----
<template>
<div id="app">
<div>
<grid-layout :layout="testLayout"
:col-num="12"
:row-height="30"
:is-draggable="true"
:is-resizable="true"
:vertical-compact="true"
:use-css-transforms="true">
<grid-item v-for="item in layout"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i">
<span class="text">{{item.i}}</span>
</grid-item>
</grid-layout>
</div>
</div>
</template>
<script>
var {GridLayout, GridItem} = require('vue-grid-layout');
export default {
name: 'app',
data(){
return {
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"}]
}
},
components: {
GridItem,
GridLayout
}
}
</script>
I have inspected html element ,It does have elements rendered ,but like these
<div class="vue-grid-layout" style="height: 210px;">
<div class="vue-grid-item vue-grid-placeholder vue-resizable cssTransforms"
style="display: none; transform: translate(10px, 10px); width: 0px; height: 0px; position: absolute;"> <span class="vue-resizable-handle"></span></div><div class="erd_scroll_detection_container erd_scroll_detection_container_animation_active" style="visibility: hidden; display: inline; width: 0px; height: 0px; z-index: -1; overflow: hidden; margin: 0px; padding: 0px;"><div dir="ltr" class="erd_scroll_detection_container" style="position: absolute; flex: 0 0 auto; overflow: hidden; z-index: -1; visibility: hidden; width: 100%; height: 100%; left: 0px; top: 0px;"><div class="erd_scroll_detection_container" style="position: absolute; flex: 0 0 auto; overflow: hidden; z-index: -1; visibility: hidden; left: -18px; top: -18px; right: -17px; bottom: -17px;"><div style="position: absolute; flex: 0 0 auto; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;"><div style="position: absolute; left: 0px; top: 0px; width: 1469px; height: 255px;"></div></div><div style="position: absolute; flex: 0 0 auto; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;"><div style="position: absolute; width: 200%; height: 200%;"></div></div></div></div></div></div>
Did i miss something?
Is there a way to have the row height be updated dynamically? I assumed that I just just pass the argument a data attribute, but it doesn't seem to be reactive to the data changing.
Hi, have you got a roadmap for Static elements feature?
Thank you
Now, I have a demand, my GridItem content is a vue file, not a number i.
How should I build my data testLayout?
How should I modify my template?
I am using webpack and tried to include the package but failed with many trails with different combinations. Please help. Appericated.
Dick Chan
Webpack configuration:
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
externals: {
"vue-grid-layout" : "VueGridLayout"
},
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
// {
// test: /.css$/,
// loader: 'style-loader!css-loader'
// },
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
// plugins: [
// new webpack.ProvidePlugin({
// $: 'vue-grid-layout',
// VueGridLayout: 'vue-grid-layout'
// }),
// ],
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
main.js
import Vue from 'vue'
import VueMaterial from 'vue-material'
// import 'vue-material/dist/vue-material.css'
import VueRouter from 'vue-router'
import App from './App.vue'
import Users from './Users.vue'
import Home from './Home.vue'
import VueGridLayout from 'vue-grid-layout'
Vue.use(VueMaterial)
Vue.use(VueRouter)
Vue.use(VueGridLayout)
const routes = [
{ path: '/users', component: Users },
{ path: '/', component: Home },
]
const router = new VueRouter({
routes: routes
})
Vue.material.registerTheme({
default: {
primary: {
color: 'light-green',
hue: 700
},
accent: 'red'
},
blue: {
primary: 'blue',
accent: 'pink'
},
orange: {
primary: 'orange',
accent: 'purple'
},
green: {
primary: 'green',
accent: 'light-green'
}
})
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":2,"h":3,"i":"18"},
{"x":2,"y":6,"w":2,"h":2,"i":"19"}
];
Vue.config.debug = true;
Vue.config.devtools = true;
var GridLayout = VueGridLayout.GridLayout;
var GridItem = VueGridLayout.GridItem;
new Vue({
el: '#app',
components: {
GridLayout,
GridItem,
},
data: {
layout: testLayout,
draggable: true,
resizable: true,
index: 0
},
router,
render: h => h(App)
})
Home.vue
[x, y, w, h]
:Error Message
3(unknown) [Vue warn]: Property or method "draggable" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in at /Users/dickhfchan/vue-webpack/vue-routing/src/Home.vue)
warn
3(unknown) [Vue warn]: Property or method "resizable" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in at /Users/dickhfchan/vue-webpack/vue-routing/src/Home.vue)
warn
(unknown) [Vue warn]: Property or method "layout" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in at /Users/dickhfchan/vue-webpack/vue-routing/src/Home.vue)
warn
(unknown) [Vue warn]: Property or method "draggable" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in at /Users/dickhfchan/vue-webpack/vue-routing/src/Home.vue)
warn
(unknown) [Vue warn]: Property or method "resizable" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in at /Users/dickhfchan/vue-webpack/vue-routing/src/Home.vue)
warn
(unknown) [Vue warn]: Property or method "layout" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in at /Users/dickhfchan/vue-webpack/vue-routing/src/Home.vue)
warn
(unknown) [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in at /Users/dickhfchan/vue-webpack/vue-routing/src/Home.vue)
warn
(unknown) You are running Vue in development mode.
I get this error Cannot set property 'eventBus' of undefined
when using the below code. Do you have any hints on how to `import this component?
<template lang="html">
<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-item v-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>
</template>
<script>
import VueGridLayout from 'vue-grid-layout';
var GridLayout = VueGridLayout.GridLayout;
var GridItem = VueGridLayout.GridItem;
export default {
components: {
GridLayout,
GridItem
},
mounted(){
},
data(){
return {
layout: [
{"x":0,"y":0,"w":2,"h":2,"i":"0"},
{"x":2,"y":0,"w":2,"h":4,"i":"1"}
]
}
}
}
</script>
I would like to use the drag option but not on all the .vue-grid-item element.
How to disable inside a child element ?
With an iframe or a button inside a .vue-grid-item element, it's not dragable, this is the behavior that I want with a textarea.
First of all...A great work 👍
When can we expect the responsive functionality.
Thanks & regards,
MK HB
Erorr: [Vue warn]: Invalid prop: type check failed for prop "layout". Expected , got Array.
Hi,
Just a heads up that 1.0.2 is published as the latest version. I recently installed fresh, expecting 2.1.6 but got 1.0.2 instead.
{ name: 'vue-grid-layout',
description: 'A draggable and resizable grid layout, as a Vue component.',
'dist-tags': { latest: '1.0.2' },
versions:
[ '0.1.0',
'0.1.1',
'1.0.0',
'1.0.1',
'1.0.2',
'2.0.0',
'2.0.1',
'2.1.0',
'2.1.1',
'2.1.2',
'2.1.3',
'2.1.4',
'2.1.5',
'2.1.6' ],
maintainers:
[ { name: 'gmsa',
email: '[email protected]' } ],
time:
{ modified: '2017-04-18T12:54:07.617Z',
created: '2016-07-25T16:49:13.906Z',
'0.1.0': '2016-07-25T16:49:13.906Z',
'0.1.1': '2016-07-26T15:17:29.268Z',
'1.0.0': '2016-10-28T11:57:33.989Z',
'2.0.0': '2016-12-30T15:17:22.028Z',
'2.0.1': '2017-01-03T17:40:28.479Z',
'2.1.0': '2017-02-06T12:55:02.157Z',
'2.1.1': '2017-02-09T14:51:15.047Z',
'2.1.2': '2017-02-16T10:37:54.763Z',
'2.1.3': '2017-03-09T09:47:23.916Z',
'2.1.4': '2017-03-20T10:44:29.421Z',
'2.1.5': '2017-03-24T09:42:25.334Z',
'2.1.6': '2017-04-06T09:09:45.880Z',
'1.0.1': '2017-04-13T08:37:19.597Z',
'1.0.2': '2017-04-18T12:54:07.617Z' },
homepage: 'https://github.com/jbaysolutions/vue-grid-layout#readme' }
In the React grid layout there is the option to create a drag handle in the item, such as a span within the griditem element. Is there such a feature here?
Hi Gustavo,
Thank you for this awesome library! We've recently switched to it from Gridstack and it has made our code much more elegant.
However, we have stumbled upon an unexpected problem: it's impossible to use nested sortables inside grid elements. It's a blocker for our app.
I've looked inside the code of vue-grid-layout and it seems that the relevant bit of interact.js configuration is hard-coded here:
this.interactObj = interact(this.$refs.item, {ignoreFrom: "a, button"});
May I suggest to move this into a property? For example, GridItem.vue
would look like this:
...
props: {
...
dragIgnoreFrom: {
type: String,
required: false,
default: 'a, button'
}
},
watch: {
...
draggable () {
...
this.interactObj = interact(this.$refs.item, {ignoreFrom: this.dragIgnoreFrom})
...
},
...
}
...
The usage pattern would then be:
<grid-item v-for="..." drag-ignore-from=".my-inner-sortable" ... />
I tested it locally and it works as a charm. I can make a pull request if you wish.
Cheers,
Andy
I'm doing a project which only permit resize the element horizontally, but there is no option to fit. So how to disable the resize function of vertical direction?Thx~
Hello,
I am getting the "You are running Vue in development mode" message even when I compile my project with NODE_ENV=production. From searching through my project the only thing I can find that is importing vue.common.js is vue-grid-layout, which looks like it was compiled without replacing process.env.NODE_ENV because I can still see it in the minified code.
Would it be possible to release a version with vue compiled in production mode.
I think it would be cool if there's a feature for grid item shape, as well as an option to allow dragging an item on any position without snapping to grid, allow overlaps of another grid, much more like a feature for free movement
Hi, I remarked, that the listensers are not removed beforeDestroy. It leads to performance issue, when you load the component multiple times. I added some code to the vue-grid-layout.min.js for removing the listeners. Could you have a look at this? Thank's.
created: function() {
var a = this;
a.resizeHandler = function(b, c, d, e, f, g) {
a.resizeEvent(b, c, d, e, f, g)
}, a.dragEventHandler = function(b, c, d, e, f, g) {
a.dragEvent(b, c, d, e, f, g)
}, i.$on("resizeEvent", a.resizeHandler), i.$on("dragEvent", a.dragEventHandler)
},
beforeDestroy: function() {
var a = this;
i.$off("resizeEvent", a.resizeHandler), i.$off("dragEvent", a.dragEventHandler), window.removeEventListener("resize", a.onWindowResize)
},
created: function() {
var a = this,
b = this;
a.updateWidthHandler = function(a) {
b.updateWidth(a)
}, a.compactHandler = function(a) {
b.compact(a)
}, f.$on("updateWidth", a.updateWidthHandler), f.$on("compact", a.compactHandler);
var c = void 0 != document.dir ? document.dir : document.getElementsByTagName("html")[0].getAttribute("dir");
this.rtl = "rtl" == c, f.$on("directionchange", function(b) {
var b = void 0 != document.dir ? document.dir : document.getElementsByTagName("html")[0].getAttribute("dir");
a.rtl = "rtl" == b, a.compact()
})
},
beforeDestroy: function() {
var a = this;
f.$off("updateWidth", a.updateWidthHandler), f.$off("compact", a.compactHandler)
},
-edited-
my fault
As already pointed out in other issues related to IE11 (e.g. #37 ), attached is the same strange behavior with the latest Firefox (53.0.3 64 bit on Win10) (no issues with the react version)
We need 'event' feature, But it looks does't support
Grid layout works with Vue 1.0.24 (as in given example) but it does not work with latest Vue version 2.0.3
Console errors: vue.js:2611 [Vue warn]: Invalid prop: type check failed for prop "layout". Expected , got Array. (found in component <GridLayout>)
Hi,
When installing from npm, you want the main
field of the package.json
to point to the dist code.
So I guess this should be dist/vue-grid-layout.js
instead.
Hi,
Again, more of a question than an issue. How can I use this excellent package in a component?
I am trying like this:
<template>
<div>
<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-item v-for="widget in layout"
:x="widget.x"
:y="widget.y"
:w="widget.w"
:h="widget.h"
:i="widget.i">
<div :id="widget.c"> </div>
</grid-item>
</grid-layout>
</div>
</template>
<script>
export default {
data: function () {
return {
layout: [
{"x":0,"y":0,"w":2,"h":2,"i":"1","c":"<b>content1</b>"},
{"x":2,"y":0,"w":2,"h":4,"i":"2","c":"<item>There I want div</item>"},
{"x":4,"y":0,"w":2,"h":5,"i":"3","c":"<b>content3</b>"},
]
};
},
components:{
GridLayout: VueGridLayout.GridLayout,
GridItem: VueGridLayout.GridItem
},
mounted: function () {
console.log('mounted');
},
}
</script>
but I get:
vue-grid-layout.min.js:1 Uncaught TypeError: Cannot set property 'eventBus' of undefined
at VueComponent.created (vue-grid-layout.min.js:1)
at callHook (eval at <anonymous> (app-a9f3cce05f.js:131), <anonymous>:2758:19)
at VueComponent.Vue._init (eval at <anonymous> (app-a9f3cce05f.js:131), <anonymous>:3377:5)
at new VueComponent (eval at <anonymous> (app-a9f3cce05f.js:131), <anonymous>:3498:12)
at createComponentInstanceForVnode (eval at <anonymous> (app-a9f3cce05f.js:131), <anonymous>:1728:10)
at init (eval at <anonymous> (app-a9f3cce05f.js:131), <anonymous>:1738:43)
at createComponent (eval at <anonymous> (app-a9f3cce05f.js:131), <anonymous>:4172:9)
at createElm (eval at <anonymous> (app-a9f3cce05f.js:131), <anonymous>:4115:9)
at createChildren (eval at <anonymous> (app-a9f3cce05f.js:131), <anonymous>:4240:9)
at createElm (eval at <anonymous> (app-a9f3cce05f.js:131), <anonymous>:4148:9)
The link to Gridster is pointing to a non existent page :)
Chrome, Firefox, and Edge work great, but at my work we can ONLY use IE11 (sad, I know).
IE11 gives this error on your sample ...
SCRIPT1003: Expected ':'
01-basic.js (35,19)
breaks:
components: {
GridLayout,
GridItem,
},
this works:
components: {
"GridLayout": GridLayout,
"GridItem": GridItem
},
It would be great to have switcher that would activate dragging of blocks on users' demand
Is there possible to return the item after dragging or resizing it?
F.ex @change="updateItem(item)" ?
Hello, i try to use this component. I included it to head tag in my jade template
script(type='text/javascript', src='Vues/vue-grid-layout.min.js')
I created file grid.js
`$(document).ready(function() {
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"},
];
var GridLayout = VueGridLayout.GridLayout;
var GridItem = VueGridLayout.GridItem;
window.vm = new Vue({
el: '#app',
components: {
GridLayout,
GridItem,
},
data: function() {
return {
layout: null,
};
},
template: [
'<div>',
'<div id="content" v-if="layout">',
'<grid-layout',
':layout.sync="layout"',
':col-num="12"',
':row-height="30"',
':is-draggable="true"',
':is-resizable="true"',
':vertical-compact="true"',
':margin="[10, 10]"',
':use-css-transforms="true">',
'<grid-item v-for="item in layout"',
':x.sync="item.x"',
':y.sync="item.y"',
':w.sync="item.w"',
':h.sync="item.h"',
':i="item.i">',
'{{item.i}}',
'</grid-item>',
'</grid-layout>',
'</div>',
'</div>'
].join(' '),
computed: {
},
ready: function() {
var vm = this;
vm.layout = testLayout;
},
methods: {
},
});
});`
and added to head tag after library.
When i reload page, i have that result http://joxi.ru/zANYYPPUlYd0b2
What did I do wrong?
Hi,
How do you add HTML content to the cells?
I have the same problem as this:
Mick
I use Vue 2.1.10,but get this error in GridItem.vue?2479:253
:
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "isDraggable"
(found in component <GridItem> at C:\projects\JBAY\vue-grid-layout\src\GridItem.vue)
please support this vue.js new feature up to date, thanks a lot
I would like to set min width on items but I have tried supplying minW (as searched and found in the js file) but cannot get it to work.
{"x":0,"y":0,"w":2,"h":2,"i":"0","minW":2} on an item seems to have no affect on resizing.
Hi,
I was looking at the react version and it seems to be more responsive when dragging items:
https://strml.github.io/react-grid-layout/examples/0-showcase.html
Is it related to the animation that as more delay or something like that?
Regards,
Marc
vue-grid-layout version: 2.1.5
Vue version: 2.2.5
When we set margins to 0, in certains widths there is a gap between blocks. The gap appears to be always 1px wide.
The issue appears to be solved when in calcColWidth we add Math.round
var colWidth = (this.containerWidth - (this.margin[0] * (this.cols + 1))) / this.cols;
to
var colWidth = Math.round((this.containerWidth - (this.margin[0] * (this.cols + 1))) / this.cols);
But this needs further tests to ensure this solution not affect other calcs.
Is it possible to make the grid bi-directional?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.