引入

npm install vue-grid-layout --save

<template>
  <div>
    <grid-layout :layout.sync="layout"
                 :col-num="colNum"
                 :row-height="30"
                 :is-draggable="draggable"
                 :is-resizable="resizable"
                 :vertical-compact="true"
                 :use-css-transforms="true"
    >
      <grid-item v-for="(item, key) in layout" :key="key"
                 :static="item.static"
                 :x="item.x"
                 :y="item.y"
                 :w="item.w"
                 :h="item.h"
                 :i="item.i"
      >
      </grid-item>
    </grid-layout>
  </div>
</template>

<script>
import {GridLayout, GridItem} from "vue-grid-layout"

export default {
  components: {
    GridLayout,
    GridItem
  },
  data() {
    return {
      layout: [
        {x: 0, y: 0, w: 4, h: 5, i: "0"},
        {x: 2, y: 0, w: 4, h: 5, i: "1"},
        {x: 4, y: 0, w: 4, h: 5, i: "2"},
        {x: 6, y: 0, w: 4, h: 5, i: "3"},
        {x: 8, y: 0, w: 4, h: 5, i: "4"},
      ],
      draggable: true,
      resizable: true,
      colNum: 12,
    }
  },
  mounted() {

  },
  methods: {}
}
</script>

<style>
*{touch-action: none}
</style>

grid-layout

grid-item