vue实现九宫格，拖拽变换位置，且在拖拽过程中组件不销毁

实现九宫格可以使用 `vue-grid-layout` 库。而实现拖拽变换位置可以使用 `vue-draggable-resizable` 库。

首先安装这两个库：

npm install vue-grid-layout vue-draggable-resizable --save

接着在 Vue 组件中引入这两个库：

<template>
  <div>
    <grid-layout :layout="layout" :col-num="3" :row-height="100">
      <div v-for="item in items" :key="item.i" :id="item.i">
        <draggable-resizable :w="item.w" :h="item.h" :x="item.x" :y="item.y" @dragging="onDragging">
          <div class="grid-item">{{ item.i }}</div>
        </draggable-resizable>
      </div>
    </grid-layout>
  </div>
</template>

<script>
import VueGridLayout from "vue-grid-layout";
import VueDraggableResizable from "vue-draggable-resizable";

export default {
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    DraggableResizable: VueDraggableResizable,
  },
  data() {
    return {
      items: [
        { i: "1", w: 1, h: 1, x: 0, y: 0 },
        { i: "2", w: 1, h: 1, x: 1, y: 0 },
        { i: "3", w: 1, h: 1, x: 2, y: 0 },
        { i: "4", w: 1, h: 1, x: 0, y: 1 },
        { i: "5", w: 1, h: 1, x: 1, y: 1 },
        { i: "6", w: 1, h: 1, x: 2, y: 1 },
        { i: "7", w: 1, h: 1, x: 0, y: 2 },
        { i: "8", w: 1, h: 1, x: 1, y: 2 },
        { i: "9", w: 1, h: 1, x: 2, y: 2 },
      ],
      layout: [
        { i: "1", x: 0, y: 0, w: 1, h: 1 },
        { i: "2", x: 1, y: 0, w: 1, h: 1 },
        { i: "3", x: 2, y: 0, w: 1, h: 1 },
        { i: "4", x: 0, y: 1, w: 1, h: 1 },
        { i: "5", x: 1, y: 1, w: 1, h: 1 },
        { i: "6", x: 2, y: 1, w: 1, h: 1 },
        { i: "7", x: 0, y: 2, w: 1, h: 1 },
        { i: "8", x: 1, y: 2, w: 1, h: 1 },
        { i: "9", x: 2, y: 2, w: 1, h: 1 },
      ],
    };
  },
  methods: {
    onDragging() {
      // do something when dragging
    },
  },
};
</script>

<style scoped>
.grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eee;
  border: 1px solid #ccc;
  font-size: 2rem;
}
</style>

在这个示例中，我们使用 `GridLayout` 组件来展示九宫格，然后在每个格子中使用 `DraggableResizable` 组件来实现拖拽变换位置。我们在 `DraggableResizable` 组件上监听了 `dragging` 事件，在拖动时可以执行相应的逻辑。同时也可以在 `DraggableResizable` 组件上设置 `w`、`h`、`x`、`y` 等属性来控制组件的大小和位置，而这些属性是根据 `layout` 和 `items` 数据计算得来的。

需要注意的是，这里的 `DraggableResizable` 组件并不会在拖拽过程中销毁，而是会在拖拽结束后根据新的位置重新计算布局。这样可以保证拖拽时组件不会出现闪烁的情况。