Vue3.0 uses the vue-grid-layout plug-in to implement drag layout

npm i vue-grid-layout --save

const layout = ref<LayoutItem[]>([
      { x: 0, y: 0, w: 1, h: 1, i: 0 },
      { x: 1, y: 0, w: 2, h: 1, i: 1 },
      { x: 0, y: 1, w: 2, h: 1, i: 2 },
      { x: 0, y: 2, w: 3, h: 1, i: 3 },
      { x: 2, y: 1, w: 1, h: 1, i: 4 },
    ]);

    <grid-layout
      :layout="layout"
      :col-num="3"
      :row-height="240"
      :is-draggable="true"
      :is-resizable="true"
      :is-mirrored="false"
      :maxRows="3"
      :vertical-compact="true"
      :margin="[10, 10]"
      :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"
        :key="item.i"
        @moved="onItemMoved"
      >{{ item.i }}</grid-item>
    </grid-layout>

import { LayoutItem } from '../types/index';
import { cloneDeep } from 'lodash'
/**
 * Check if the layout is legal* 1. Deep copy the array to avoid contaminating the original array* 2. Get the maximum value of y for traversal* 3. Get each y subarray and sort it in ascending order of x* 4. If the array length is 1, determine whether w is equal to the maximum x
 * 5. If the length of the array is not 1, traverse the array to determine whether the w of each element is equal to the x of the next element. Accumulate w to determine whether the sum is equal to the maximum x.
 * 6. If legal, return false
 * @param list 
 * @returns 
 */
export const verifyLayout = (list: Array<LayoutItem>): boolean => {
    let yList = list.map(item => { return item.y });
    yList = yList.sort((a, b) => { return a - b });
    console.log(list);
    const newArr = cloneDeep(list);
    let flag = false;
    const maxY = yList[yList.length - 1];
    const maxX = 3;
    console.log(maxY);
    for (let i = 0; i <= maxY; i++) {
        let arr = newArr.filter((item: LayoutItem) => {
            return item.y === i;
        });
        console.log(arr, arr.length);
        if (arr && arr.length > 1) {
            console.log('Multiple-------------------', i);
            let calValue = 0;
            arr = arr.sort((a: LayoutItem, b: LayoutItem) => { return ax - bx })
            arr.forEach((childItem: LayoutItem, index: number) => {
                calValue += childItem.w;
                console.log('calValue--------------', calValue, index);
                if (index !== arr.length - 1 && calValue !== arr[index + 1].x) {
                    flag = true;
                }
                if (index === arr.length - 1 && calValue !== maxX) {
                    flag = true;
                }
            })
        } else {
            console.log('There is only one------------------', i);
            if (arr[0].w !== maxX) {
                flag = true
            }
        }
    }
    console.log(flag);
    return flag;
}

    /**
     * Drag completion event* 1. Store the previous data in the history data* 2. Then store the data after the move in the nowlayout data*/
    const onItemMoved = () => {
      console.log('moved--------------------')
      historyDataList.value.push(cloneDeep(nowLayoutData.value));
      nowLayoutData.value = cloneDeep(layout.value);
      // const flag = verifyLayout(layout.value);
      // if (flag) {
      // goBack()
      // }
    };
    const goBack = () => {
      console.log(historyDataList.value[historyDataList.value.length - 1]);
      layout.value = historyDataList.value[historyDataList.value.length - 1];
      nowLayoutData.value = cloneDeep(layout.value);
      historyDataList.value.pop();
    }