Vue Grid Layout 实现元素拖拽改变元素布局顺序功能（以el-card为例）

官网：https://jbaysolutions.github.io/vue-grid-layout/zh/

• Npm安装及导入库
• 使用实现拖拽改变元素布局顺序
  • 元素初始化赋值
  • 处理拖拽后信息
• 实现效果

Npm安装及导入库

npm install vue-grid-layout --save

// 全局引用
import VueGridLayout from 'vue-grid-layout'
app.use(VueGridLayout).mount('#app')

实现使用实现拖拽改变元素布局顺序

基础用法

<grid-layout
            :layout.sync="layout"
            :col-num="12"
            :row-height="30"
            :is-draggable="true"
            :is-resizable="true"
            :is-mirrored="false"
            :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">
            {{item.i}}
        </grid-item>
    </grid-layout>

属性	说明
layout	数据源。值必须为 Array，其数据项为 Object。
colNum	定义栅格系统的列数，其值需为自然数。
rowHeight	每行的高度，单位像素。
isDraggable	标识栅格中的元素是否可拖拽。
isResizable	标识栅格中的元素是否可调整大小。
isMirrored	标识栅格中的元素是否可镜像反转。

属性	说明
i	栅格中元素的ID。
x	标识栅格元素位于第几列，需为自然数。
y	标识栅格元素位于第几行，需为自然数。
w	标识栅格元素的初始宽度，值为colWidth的倍数。
h	标识栅格元素的初始高度，值为rowHeight的倍数。

实现

<grid-layout 
v-model:layout="itemList" 
:col-num="3" :row-height="330" 
:is-draggable="true" :is-resizable="false" 
:vertical-compact="true" :margin="[10, 0]" 
@layout-updated="layoutUpdatedEvent">
        <grid-item ref="gridItem" v-for="(item, index) in itemList" 
        :x="item.x" 
        :y="item.y" 
        :w="item.w" 
        :h="item.h" 
        :i="item.i" 
        :key="item.i">
          <el-card :body-style="{ padding: '0px' }">
            <img class="image"
              src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"/>
            <div style="padding: 14px">
              <span>Yummy hamburger {{ item.id }}</span>
              <div class="bottom">
                <el-button text class="button">Operating</el-button>
              </div>
            </div>
          </el-card>
        </grid-item>
</grid-layout>

元素初始化赋值位置，以colNum=3为例：

const handlePosition = (itemList) => {
    for (let i=0; i<itemList.value.length; i++) {
        let item = itemList.value[i];
        item.i = i;
        item.w = 1;
        item.h = 1;
        item.x = i%3;
        item.y = Math.floor(i/3);
    }
}

根据上述步骤已经实现元素可拖拽，要实现重新排序，还需要在元素完成移动后，利用@layout-updated方法获取排序后新返回的元素列表

const layoutUpdatedEvent = async(newLayout) => {
      // newLayout为排序后的返回的数据源，对数据可以进行相关操作赋值
      itemList.value = newLayout
}

实现效果

前

后