xhlife / vue3-grid-layout

About A draggable and resizable grid layout, for Vue3.

Support By

This project js support by vue-grid-layout, but vue-grid-layout do not support vue3.

Vue 3 + TypeScript + Vite

The template uses Vue 3 <script setup> SFCs, so pay attention to the version of vue.

Supports Vue 3.2+

Usage

npm i vue3-grid-layout-next

Documentation Website

add Scoped slot

<grid-item v-slot="{style}">
  <div>
    <!-- get attribute, such as width,height, and so no  -->
    {{ style }}
  </div>
</grid-item>

add dragging、 dragend event

<grid-item
  @dragging="doSomething"
  @dragend="doSomethingEnd"
  >
</grid-item>

<script lang="ts" setup> 

  function doSomethin(event: MouseEvent, i: number | string) {
    
  }
</script>

beware

Usage with v-model

 <GridLayout v-model:layout="layout">
  ...
 </GridLayout>

Use ref object

If the responsive property is true, make sure layout is a ref object

<script lang="ts" setup> 

  const responsive = ref(true)
  const layout = ref([])
  // const layout = reactive([]) // will cause some bug

  // it will work, when responsive is false
  // const layout = reactive([])

</script>

<template>
  <div class="layout">
    <GridLayout v-model:layout="layout" :responsive="responsive" >
      ...
    </GridLayout>
  </div>
</template>

example

demo for echart - source：https://gitee.com/cxid/vue3-grid-layout-demo

vue3-grid-layout's Issues

切换echart图表没有动画

当使用绑定响应式属性ref的select来切换图表的时候，echarts没有了动画，以下是源码里LineChart.vue,，我写了复现代码：

<template>
  <div class="mode-control">
    <a-select
      v-model:value="chartType"
      style="width: 120px"
      @change="onChartTypeChange"
    >
      <a-select-option value="trend">trend</a-select-option>
      <a-select-option value="stack">stack</a-select-option>
      <a-select-option value="accumulate">accumulate</a-select-option>
      <a-select-option value="distribute">distribute</a-select-option>
    </a-select>
  </div>
  <div ref="bar" :style="styleObj"></div>
</template>
<script lang="ts" setup>
import {ref, onUpdated, computed,onMounted} from "vue"
import echarts from "./index"
import {ECharts, EChartsCoreOption} from "echarts/core"

const props = defineProps<{
  styleObj: {width: string; height: string}
}>()
const chartType = ref('trend')
const styleObj = computed(() => {
  return {
    width: props.styleObj.width,
    height: props.styleObj.height
  }
})

const bar = ref<HTMLElement>()
let ins: ECharts | null = null
const defaultOption = {
  legend: {
    orient: 'horizontal',
    bottom: 0,
    data: []
  },
  tooltip: {
    show:true
  },
  xAxis: [{
    type: 'category',
    boundaryGap:true,
    axisTick: {
      alignWithLabel:true
    },
    axisLabel: {
      interval: 0,
    },
    data: []
  }],
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [],
    type: "line",
  }]
}
const option = {
    "legend": {
      "data": [
        {
          "name": "click.总次数"
        }
      ]
    },
    "xAxis": [
      {
      "type": "category",
      "boundaryGap": true,
      "axisTick": {
          "alignWithLabel": true
      },
      "data": [
          "04-10",
          "04-11",
          "04-12",
          "04-13",
          "04-14",
          "04-15",
          "04-16" 
      ]
      }
    ],
    "series": [
      {
        "name": "click.总次数",
        "data": [
          2,
          3,
          0,
          0,
          0,
          2,
          0
        ],
        "type": "line"
      }
    ]
}

const option2 = {
    "legend": {
        "data": [
            {
                "name": "click.总次数"
            }
        ]
    },
    "xAxis": [
        {
            "type": "category",
            "boundaryGap": true,
            "axisTick": {
                "alignWithLabel": true
            },
            "data": [
                "04-10",
                "04-11",
                "04-12",
                "04-13",
                "04-14",
                "04-15",
                "04-16"
            ]
        }
    ],
    "series": [
        {
            "xAxisIndex": 0,
            "name": "click.总次数",
            "data": [
                "2",
                "3",
                "0",
                "0",
                "0",
                "2",
                "0"
            ],
            "type": "line",
            "stack": "x",
            "areaStyle": {}
        }
    ]
}
const option3 = {
    "legend": {
        "data": [
            {
                "name": "click.总次数"
            }
        ]
    },
    "xAxis": [
        {
            "type": "category",
            "boundaryGap": true,
            "axisTick": {
                "alignWithLabel": true
            },
            "data": [
                "04-10",
                "04-11",
                "04-12",
                "04-13",
                "04-14",
                "04-15",
                "04-16"
            ]
        }
    ],
    "series": [
        {
            "xAxisIndex": 0,
            "name": "click.总次数",
            "data": [
                2,
                5,
                5,
                5,
                5,
                7,
                7
            ],
            "type": "line"
        }
    ]
}

const option4 = {
    "legend": {
        "data": [
            {
                "name": "原始日期"
            }
        ]
    },
    "xAxis": {
        "data": [
            "click.总次数.总体"
        ],
        "axisLabel": {
            "interval": 0
        },
        "boundaryGap": true,
        "axisTick": {
            "alignWithLabel": true
        }
    },
    "series": [
        {
            "name": "原始日期",
            "type": "bar",
            "barWidth": 40,
            "data": [
                "7"
            ]
        }
    ]
}
onUpdated(() => {
  if (bar.value && !ins) {
    const w = getStyle(bar.value, "width")
    if (w !== "0px") {
      ins = echarts.init(bar.value)
      ins.setOption(defaultOption)
    }
  }
  if (ins) {
    ins.resize()
  }
})
function getStyle(dom: HTMLElement, attr: string) {
  return window.getComputedStyle(dom, null)[attr]
}

const onChartTypeChange = (type:string) => {
  if (type==='trend') {
    ins.setOption(option, {replaceMerge: ['series', 'xAxis']})
  } else if(type==='stack'){
    ins.setOption(option2, {replaceMerge: ['series', 'xAxis']})
  } else if(type==='accumulate'){
    ins.setOption(option3, {replaceMerge: ['series', 'xAxis']})
  } else if(type==='distribute'){
    ins.setOption(option4, {replaceMerge: ['series', 'xAxis']})
  }
}
</script>
<style lang="scss" scoped></style>

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

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

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

layoutUpdate(）

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

拖拽事件导致grid-item里的子组件的横向滚动条无法滚动

当想拖拽子组件的横向滚动条时，拖拽grid-item去了，无法拖拽子组件的横向滚动条

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

例程源码能放出来吗？

【grid-item】拉伸浏览器宽度时container-resized事件没有抛出来

看了下这里方法调用没有加上括号

hi demo有源码吗想学习一下

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

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

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

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!

需要在两个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时从源数组上删除该项引发异常？

[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

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>

Horizontal Compact

Will there be support for a horizontal compact option?

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

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

GridItem没有类型提示

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

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

[BUG] Prop col-num not applying in mount

Hi!!!
i've a problem with the col-num/colNum prop that is not applying at the creation of the component but it works if i change after mount.
I'm trying to set to 24 in mount but impossible.

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