目錄

• 1、外掛
• 2、插曲
• 3、實現
• 4、校驗函式

1、外掛

首先，我們選擇的外掛是-grid-layout

npm i vue-grid-layout --save

官網：https://jbaysolutions.....

2、插曲

安裝完依賴，發現專案能啟動起來，按照官網demo發現頁面空白，控制檯提示沒有找到子元件

改變思路，不使用區域性引入元件，使用全域性引入元件。

3、實現

const layout = ref<LayoutItem[]>([
   uQGxchaPWC   { x: 0,y: 0,w: 1,h: 1,i: 0 },{ x: 1,w: 2,i: 1 },{ x: 0,y: 1,i: 2 },y: 2,w: 3,i: 3 },{ x: 2,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--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>

效果：

但是！！
這裡拖拽完沒有判斷每一行是否填充滿且拖拽後有模組會被覆蓋導致出現空白區域，如下：

思考：

我們需要增加校驗，校驗每一行是否填充滿

4、校驗函式

import { LayoutItem } from '../types/index';
import { cloneDeep } from 'lodash'
/**
 * 校驗佈局是否合法
 * 1.深拷貝陣列，避免汙染原陣列
 * 2.拿到y的最大值 用於遍歷
 * 3http://www.cppcns.com.拿到每個y的分陣列 按照x升序排列
 * 4.如果陣列長度為1判斷w是否等於最大x
 * 5.如果陣列長度不為1 遍歷陣列 判斷每個元素的w是否等於下一個元素的x 累加w判斷總和是否等於最大x
 * 6.如果合法則返回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) => {
        http://www.cppcns.com
 
    return item.y === i;
        });
        console.log(arr,arr.length);
        if (arr && arr.length > 1) {
            console.log('多個個-------------------',i);
            let calValue = 0;
            arr = arr.sort((a: LayoutItem,b: LayoutItem) => { return a.x - b.x })
            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('只有一個-------------------',i);
            if (arr[0].w !== maxX) {
                flag = true
            }
        }
    }
    console.lowww.cppcns.com
 
g(flag);
    return flag;
}

思路的話就是我在函式上的註釋。
在每次拖拽完成的回撥函式中進行校驗

    /**
     * 拖拽完成事件
     * 1.將之前的資料儲存到history資料中
     * 2.然後再將移動完成的資料儲存到nowlayout資料中
     */
    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();
    }

這樣的話每次我們拖拽完校驗如果不合法就會回滾，就能保證每一行填充滿了！！！！

到此這篇關於Vue3.0利用vue-grid-layout外掛實現拖拽佈局的文章就介紹到這了,更多相關Vue3 利用vue-grid-layout外掛實現拖拽佈局內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！