Vue3.0はvue-grid-layoutプラグインを使用してドラッグレイアウトを実装します。

npm i vue-grid-layout --save

constレイアウト = ref<LayoutItem[]>([
      { x: 0, y: 0, 幅: 1, 高さ: 1, 自: 0 },
      { x: 1, y: 0, 幅: 2, 高さ: 1, 自: 1 },
      { x: 0, y: 1, 幅: 2, 高さ: 1, 自: 2 },
      { x: 0, y: 2, 幅: 3, 高さ: 1, 自: 3 },
      { x: 2, y: 1, 幅: 1, 高さ: 1, i: 4 },
    ]);

    <グリッドレイアウト
      :layout="レイアウト"
      :列番号="3"
      :行の高さ="240"
      :ドラッグ可能="true"
      :is-resizable="true"
      :is-mirrored="false"
      :maxRows="3"
      :vertical-compact="true"
      :margin="[10, 10]"
      :use-css-transforms="true"
    >
      <グリッド項目
        v-for="レイアウト内の項目"
        :x="アイテム.x"
        :y="アイテム.y"
        :w="アイテム.w"
        :h="アイテム.h"
        :i="アイテムi"
        :key="item.i"
        @moved="onItemMoved"
      >{{ 項目.i }}</グリッド項目>
    </グリッドレイアウト>

'../types/index' から LayoutItem をインポートします。
'lodash' から { cloneDeep } をインポートします
/**
 * レイアウトが正しいかどうかを確認します* 1. 元の配列を汚染しないように配列をディープコピーします* 2. トラバーサルのyの最大値を取得します* 3. 各yサブ配列を取得し、xの昇順で並べ替えます* 4. 配列の長さが1の場合、wが最大値xに等しいかどうかを判断します
 * 5. 配列の長さが 1 でない場合は、配列を走査して、各要素の w が次の要素の x と等しいかどうかを判断します。w を累積して、合計が最大 x と等しいかどうかを判断します。
 * 6. 合法であればfalseを返す
 * @パラメータリスト 
 * @戻り値 
 */
エクスポートconst verifyLayout = (list: Array<LayoutItem>): boolean => {
    yList を list.map(item => { return item.y });
    yList = yList.sort((a, b) => { return a - b });
    console.log(リスト);
    const newArr = cloneDeep(リスト);
    フラグを false にします。
    定数maxY = yList[yList.length - 1];
    定数maxX = 3;
    コンソールログ(最大Y);
    (i = 0; i <= maxY; i++) の場合 {
        arr = newArr.filter((item: LayoutItem) => { とします。
            item.y === i を返します。
        });
        コンソールにログ出力します。
        (arr && arr.length > 1) の場合 {
            console.log('複数-------------------', i);
            calValue = 0 とします。
            arr = arr.sort((a: LayoutItem, b: LayoutItem) => { return ax - bx })
            arr.forEach((childItem: LayoutItem, index: 数値) => {
                calValue += 子アイテム.w;
                console.log('calValue--------------', calValue, インデックス);
                if (index !== arr.length - 1 && calValue !== arr[index + 1].x) {
                    フラグ = true;
                }
                if (index === arr.length - 1 && calValue !== maxX) {
                    フラグ = true;
                }
            })
        } それ以外 {
            console.log('------------------は1つだけです', i);
            (arr[0].w !== maxX) の場合 {
                フラグ = true
            }
        }
    }
    console.log(フラグ);
    フラグを返します。
}

    /**
     * ドラッグ完了イベント* 1. 以前のデータを履歴データに保存します* 2. 次に、移動後のデータをnowlayoutデータに保存します*/
    定数 onItemMoved = () => {
      console.log('移動しました--------------------')
      historyDataList.value.push(cloneDeep(nowLayoutData.value));
      LayoutData.value を cloneDeep(layout.value);
      // 定数 flag = verifyLayout(layout.value);
      // if (フラグ) {
      // 戻る()
      // }
    };
    定数 goBack = () => {
      console.log(履歴データリストの値[履歴データリストの値の長さ - 1]);
      layout.value = historyDataList.value[historyDataList.value.length - 1];
      LayoutData.value を cloneDeep(layout.value);
      履歴データリストの値のポップ();
    }