基于vue-grid-layout插件（vue版本）实现增删改查/拖拽自动排序等功能（已验证、可正常运行）

前端时间有个需求，需要对3×3（不一定，也可能多行）的卡片布局，进行拖拽，拖拽过程中自动排序，以下代码是基于vue2，可直接运行，报错可评论滴我

部分代码优化来自于GPT4o和Claude：官方直连GPT/Claude

代码如下：

<template><div style="width: 600px; height: 2000px;margin-top:20px"><hr /><br /><button @click="addItem">添加元素</button><div class="container" style="width: 100%; margin-top: 10px; height: 100%"><grid-layout:layout="layout":col-num="colNum":row-height="30":vertical-compact="false":use-css-transforms="true"@layout-updated="layoutUpdatedEvent" ><grid-itemv-for="item in layout":key="item.i":x="item.x":y="item.y":w="item.w":h="item.h":i="item.i"><span class="text">{{ item.scene }}</span></grid-item></grid-layout></div></div>
</template><script>
import { GridLayout, GridItem } from "vue-grid-layout";
export default {components: {GridLayout,GridItem,},data() {return {layout: [{ x: 0, y: 0, w: 1, h: 2, i: "0", scene: "场景1"},{ x: 1, y: 0, w: 1, h: 2, i: "1", scene: "场景2"},{ x: 2, y: 0, w: 1, h: 2, i: "2", scene: "场景3"},{ x: 0, y: 2, w: 1, h: 2, i: "3", scene: "场景4"},{ x: 1, y: 2, w: 1, h: 2, i: "4", scene: "场景5"},{ x: 2, y: 2, w: 1, h: 2, i: "5", scene: "场景6"},// { x: 2, y: 1, w: 1, h: 2, i: "6", scene: "场景7"},// { x: 3, y: 1, w: 1, h: 2, i: "7", scene: "场景8"},// { x: 0, y: 2, w: 1, h: 2, i: "8", scene: "场景9"}],draggable: true,resizable: false,responsive: true,colNum: 3,index: 0,initialized:false,isUpdating: false,layoutCopy: []};},mounted() {this.index = this.layout.length;},methods: {layoutUpdatedEvent(newLayout) {if (!this.isUpdating) {this.isUpdating = true;this.rearrangeLayout(newLayout);this.$nextTick(() => {this.isUpdating = false;});}},rearrangeLayout(layout) {// 创建 layout 的深拷贝，防止修改原始数据let newLayout = layout;// 按 y 和 x 排序newLayout.sort((a, b) => a.y - b.y || a.x - b.x);// 重新排列布局for (let i = 0; i < newLayout.length; i++) {newLayout[i].x = (i % 3) * 1;newLayout[i].y = Math.floor(i / 3)*newLayout[i].h;}this.layout= newLayout;},addItem(){// Add a new item. It must have a unique key!this.layout.push({x: (this.layout.length * 1) % (this.colNum || 12),// q:为什么* 2 a:因为每个元素的宽度是2y: this.layout.length + (this.colNum || 12), // puts it at the bottomw: 1,h: 2,i: this.index,scene: `场景${this.layout.length + 1}`});console.log(this.layout,"this.layout");// Increment the counter to ensure key is always unique.this.index++;},removeItem(){const index = this.layout.map(item => item.i).indexOf(val);this.layout.splice(index, 1);},}
};
</script><style>
.container .vue-grid-item.vue-grid-placeholder {background: none;border: #00893d dashed 2px;
}
.vue-grid-layout {background: #eee;
}
.vue-grid-item:not(.vue-grid-placeholder) {background: #00893d;border: 1px solid #00893d;
}
.vue-grid-item .resizing {opacity: 0.9;
}
.vue-grid-item .static {background: #cce;
}
.vue-grid-item .text {font-size: 24px;text-align: center;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;height: 100%;width: 100%;color: #FFF;
}
.vue-grid-item .no-drag {height: 100%;width: 100%;
}
.vue-grid-item .minMax {font-size: 12px;
}
.vue-grid-item .add {cursor: pointer;
}
.vue-draggable-handle {position: absolute;width: 20px;height: 20px;top: 0;left: 0;background-position: bottom right;padding: 0 8px 8px 0;background-repeat: no-repeat;background-origin: content-box;box-sizing: border-box;cursor: pointer;
}
.layoutJSON {background: #ddd;border: 1px solid #00893d;margin-top: 10px;padding: 10px;
}
.columns {-moz-columns: 120px;-webkit-columns: 120px;columns: 120px;
}
</style>