Vue3.0 verwendet das Plug-In vue-grid-layout, um Drag-Layout zu implementieren

npm ich vue-grid-layout --speichern

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 },
    ]);

    <Raster-Layout
      :layout="Layout"
      :Spaltennummer="3"
      :Zeilenhöhe="240"
      :ist-draggable="wahr"
      :ist größenveränderbar="true"
      :ist-gespiegelt="false"
      :maxRows="3"
      :vertical-compact="wahr"
      :Rand="[10, 10]"
      :use-css-transforms="wahr"
    >
      <Rasterelement
        v-for="Element im Layout"
        :x="Artikel.x"
        :y="Artikel.y"
        :w="Artikel.w"
        :h="Artikel.h"
        :i="Artikel.i"
        :Schlüssel="Artikel.i"
        @moved="beimElement verschoben"
      >{{ Element.i }}</grid-item>
    </Rasterlayout>

importiere { LayoutItem } aus '../types/index';
importiere { cloneDeep } von 'lodash'
/**
 * Überprüfen Sie, ob das Layout zulässig ist. * 1. Kopieren Sie das Array vollständig, um eine Verunreinigung des Original-Arrays zu vermeiden. * 2. Ermitteln Sie den Maximalwert von y für die Durchquerung. * 3. Holen Sie sich jedes y-Subarray und sortieren Sie es in aufsteigender Reihenfolge von x. * 4. Wenn die Arraylänge 1 beträgt, bestimmen Sie, ob w gleich dem maximalen x ist.
 * 5. Wenn die Länge des Arrays nicht 1 ist, durchlaufen Sie das Array, um zu bestimmen, ob das w jedes Elements gleich dem x des nächsten Elements ist. Akkumulieren Sie w, um zu bestimmen, ob die Summe gleich dem maximalen x ist.
 * 6. Wenn zulässig, geben Sie false zurück
 * @param-Liste 
 * @returns 
 */
export const verifyLayout = (Liste: Array<LayoutItem>): boolean => {
    yList = list.map(item => { return item.y });
    yList = yList.sort((a, b) => { return a - b });
    konsole.log(Liste);
    const newArr = cloneDeep(Liste);
    lass flag = false;
    const maxY = yList[yList.Länge - 1];
    Konstante maxX = 3;
    Konsole.log(maxY);
    für (sei i = 0; i <= maxY; i++) {
        lass arr = newArr.filter((item: LayoutItem) => {
            gibt Element.y === i zurück;
        });
        Konsole.log(arr, arr.Länge);
        wenn (arr && arr.length > 1) {
            console.log('Mehrere-------------------', i);
            lassen Sie calValue = 0;
            arr = arr.sort((a: Layoutelement, b: Layoutelement) => { return ax - bx })
            arr.forEach((childItem: LayoutItem, index: number) => {
                calValue += untergeordnetesItem.w;
                console.log('Kalkulationswert--------------', Kalkulationswert, Index);
                wenn (Index !== arr.Länge - 1 und calValue !== arr[Index + 1].x) {
                    Flagge = wahr;
                }
                wenn (index === arr.length - 1 und calValue !== maxX) {
                    Flagge = wahr;
                }
            })
        } anders {
            console.log('Es gibt nur einen------------------', i);
            wenn (arr[0].w !== maxX) {
                Flagge = wahr
            }
        }
    }
    Konsole.log(Flag);
    Flagge zurückgeben;
}

    /**
     * Drag-Completion-Ereignis* 1. Speichern Sie die vorherigen Daten in den Verlaufsdaten* 2. Speichern Sie dann die Daten nach der Verschiebung in den Nowlayout-Daten*/
    const onItemMoved = () => {
      console.log('verschoben--------------------')
      historyDataList.value.push(cloneDeep(jetztLayoutData.value));
      jetztLayoutData.value = cloneDeep(layout.value);
      // const flag = verifyLayout(layout.value);
      // wenn (Flagge) {
      // geh zurück()
      // }
    };
    const goBack = () => {
      Konsole.log(historyDataList.value[historyDataList.value.length - 1]);
      layout.value = historyDataList.value[historyDataList.value.length - 1];
      jetztLayoutData.value = cloneDeep(layout.value);
      historyDataList.value.pop();
    }