This project js support by vue-grid-layout, but vue-grid-layout do not support vue3.
The template uses Vue 3 <script setup> SFCs, so pay attention to the version of vue.
npm i vue3-grid-layout-next<grid-item v-slot="{style}">
<div>
<!-- get attribute, such as width,height, and so no -->
{{ style }}
</div>
</grid-item><grid-item
@dragging="doSomething"
@dragend="doSomethingEnd"
>
</grid-item>
<script lang="ts" setup>
function doSomethin(event: MouseEvent, i: number | string) {
}
</script> <GridLayout v-model:layout="layout">
...
</GridLayout>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>demo for echart - source：https://gitee.com/cxid/vue3-grid-layout-demo
