官网: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
}
实现效果
前
后