xhlife/vue3-grid-layout

About A draggable and resizable grid layout, for Vue3.

vue3-grid-layout's Issues

drag or resize，grid-item里的异步组件会重新加载

当拖拽或者修改大小时，item里的异步组件会不断的重新渲染。
defineAsyncComponent({
loader: () => import('test.vue')
})

例程源码能放出来吗？

[Vue warn]: Detected a possible deep change on field `value` ref

Following warning is logged in console.

[Vue warn]: Detected a possible deep change on field `value` ref, for nested changes please either set the entire ref value or use `setValue` or `handleChange`.

Could these lines be causing it?

vue3-grid-layout/src/components/Grid/GridLayout.vue

Lines 409 to 413 in 6582ab0

	placeholder.value.i = id as string | number
	placeholder.value.x = l.x as number
	placeholder.value.y = l.y as number
	placeholder.value.w = w as number
	placeholder.value.h = h as number

Not able to drag to new position

I'm able to drag however I can't drag to a new position.

This is the error I get in my console:

MouseEvent.mozPressure is deprecated. Use PointerEvent.pressure instead.
MouseEvent.mozInputSource is deprecated. Use PointerEvent.pointerType instead.

I'm using Firefox.

Edit:
Find out it has no effect

Horizontal Compact

Will there be support for a horizontal compact option?

将外面的盒子移动到里面怎么搞？

Newly added items are added randomly

Hello, when I add new items to existing items, they are not added sequentially and are added randomly. Please look carefully at the id numbers written under the items.
Here is image :
https://ibb.co/6grS635

`const layout = reactive([
{"x":0,"y":0,w: 4, h: 10,"i":0, "uid":'123'},
{"x":4,"y":0,w: 4, h: 10,"i":1, "uid":'1234'},

]);
const itemTitle = (item) => {
let result = item.i;
if (item.static) {
result += " - Static";
}
return result;
}
let draggable = true
let resizable = true
let index = 0
let colNum = 12
let autoSize = true

onBeforeMount(async () => {
index = layout.length

})

const addItem = function () {
// Add a new item. It must haconstve a unique key!
console.log(layout.length)
layout.push({
x: (layout.length * 2) % (colNum || 12),
y: layout.length + (colNum || 12), // puts it at the bottom
w: 4,
h: 10,
i: index,
uid: uniqueId,
});
// Increment the counter to ensure key is always unique.
index++;
}
const removeItem = function (val) {
const index = layout.map(item => item.i).indexOf(val);
layout.splice(index, 1);
}`

<grid-layout :layout.sync="layout" :row-height="25" :is-draggable="draggable" :is-resizable="resizable" :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" </grid-item> </grid-layout>

layout re-sizing in loop

I am using 2 grid layouts, one nested inside the other. (Both responsive not resizeable). THe girdd layout upadte gets called in loop and the grid become smallers

<grid-layout
        v-bind="$attrs"
        ref="gridLayout"
        v-model:layout="widgetsToDisplay"
        :col-num="layoutDefaults.colNum"
        :cols="layoutDefaults.cols"
        :is-mirrored="false"
        :vertical-compact="true"
        :margin="layoutDefaults.margin"
        :use-css-transforms="false"
        :row-height="layoutDefaults.rowHeight"
        :auto-size="shouldAutosize"
        data-test="vue-grid-layout"
      >
        <grid-item
          v-for="item in widgetsToDisplay"
          :key="item.i.UUID"
          :x="item.x"
          :y="item.y"
          :w="item.w"
          :h="item.h"
          :i="item.i"
          :min-w="widgetsSize[item.i.type].min[0]"
          :min-h="widgetsSize[item.i.type].min[1]"
          drag-allow-from=".widget-toolbar"
          :max-w="widgetsSize[item.i.type].max[0]"
          :max-h="widgetsSize[item.i.type].max[1]"
          @resize="widgetResize"
          @resized="widgetResize"
          @moved="widgetMove"
          :class="{
            'html-widget': checkItemType(item, 'HTML'),
            'is-cockpit-widget': checkItemType(item, 'Cockpit') || checkItemType(item, 'Access Control Cockpits')
          }"
          data-test="vue-grid-item"
        >
....
// renders the same component again
....
</grid-item>
</grid-layout>

All components width shrinks

Vue:3
node: v20
Browser: chrome

拖动的时候，作为背景的盒子会闪烁

Cards overlapping when responsive

Hi xhlife,
first off all, thanks for this project! <3

I have experienced an issue with the responsive feature.

Think of a layout with 3 x 3 cards.
While shrinking, the grid is responsive, but not collapsing to a 9x1 but to a 3x1 grid.
So the cards of one row are overlapping.

Does that happen others as well?
"vue3-grid-layout-next": "^1.0.6",

Thanks again!

GridItem没有类型提示

如题，GridLayout.vue.d.ts有Props等类型；而GridItem不知道什么原因，d.ts中只有一个unknown类型的Component

这在TSX下使用会非常不友好，开发大哥有空可以看看是什么问题！

layoutUpdate(）

在vue2中，this.$refs.gridLayout.updateLayout()可以获取到，在vue3中没有抛出来吗？

layoutUpdate（）这个方法没有抛出来吗

layoutUpdate()这个方法没有抛出来吗

Can we have access to the source code of demo.

Can we have access to the source code of demo project in https://cxid.gitee.io/works/work/vue3-grid-layout/index.html

需要在两个GridLayout之间移动GridItem，请问有什么解决办法？

尝试过在GridItem移动事件中，删除源GridLayout中的layout数组中的item，再插入到目标GridLayout的layout数组中，但这样会引发handleDrag中的异常：

  if (!mouseInGrid) {
    let draggingIndex = layoutData.value[0].findIndex(ele => ele.i === itemId)
    let removed = layoutData.value[0].splice(draggingIndex, 1)
    console.log(layoutData.value[0], removed)
  }

大概可以模仿drag-from-outside例子，但先要解决拖少源GridItem时从源数组上删除该项引发异常？

hi demo有源码吗想学习一下

想学习下示例源码 https://cxid.gitee.io/works/work/vue3-grid-layout/index.html