vue-grid-layout实现桌面拖拽布局
vue-grid-layout实现拖拽布局
想实现桌面自由拖拽布局的效果，找到了vue-grid-layout栅格布局插件，可以完美解决。
初始布局，拖动可改变布局。
安装vue-grid-layout
npm install vue-grid-layout --save
引入vue-grid-layout
import VueGridLayout from 'vue-grid-layout'
示例
<template>
<div class="board" style="width: 100%">
<div class="home">
<grid-layout
:layout="layoutData"
:col-num="layoutConfig.collomn"
:maxRows="layoutConfig.maxRows"
:row-height="layoutConfig.rowHeight"
:is-draggable="layoutConfig.dialogVisible"
:is-resizable="layoutConfig.isResizeable"
:is-mirrored="layoutConfig.isMirrored"
:vertical-compact="layoutConfig.vertical"
:margin="layoutConfig.margin"
:use-css-transforms="layoutConfig.
"
@layout-created="layoutCreatedEvent"
@layout-before-mount="layoutBeforeMountEvent"
@layout-mounted="layoutMountedEvent"
@layout-ready="layoutReadyEvent"
@layout-updated="layoutUpdatedEvent"
>
<grid-item v-for="(item) in layoutData"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i"
:key="item.i"
@resize="resizeEvent"
@move="moveEvent"
@resized="resizedEvent"
@moved="movedEvent"
>
{
{item.i}}
grid-item>
grid-layout>
div>
div>
template>
<script>
import VueGridLayout from 'vue-grid-layout'
const GridLayout = VueGridLayout.GridLayout
const GridItem = VueGridLayout.GridItem
const layoutData = {
"mainData": [
{
"x": 0,
"y": 0,
"w": 6,
"h": 1,
"i": "0"
},
{
"x": 0,
"y": 1,
"w": 6,
"h": 1,
"i": "1"
},
{
"x": 0,
"y": 2,
"w": 6,
"h": 1,
"i": "2"
},
{
"x": 0,
"y": 3,
"w": 6,
"h": 1,
"i": "3"
},
{
"x": 6,
"y": 0,
"w": 6,
"h": 1,
"i": "4"
},
{
"x": 6,
"y": 1,
"w": 6,
"h": 1,
"i": "5"
},
{
"x": 6,
"y": 2,
"w": 6,
"h": 1,
"i": "6"
},
{
"x": 6,
"y": 3,
"w": 6,
"h": 1,
"i": "7"
},
{
"x": 12,
"y": 0,
"w": 6,
"h": 1,
"i": "8"
},
{
"x": 12,
"y": 1,
"w": 6,
"h": 1,
"i": "9"
},
{
"x": 12,
"y": 2,
"w": 6,
"h": 1,
"i": "10"
},
{
"x": 12,
"y": 3,
"w": 6,
"h": 1,
"i": "11"
},
{
"x": 18,
"y": 0,
"w": 6,
"h": 1,
"i": "12"
},
{
"x": 18,
"y": 1,
"w": 6,
"h": 1,
"i": "13"
},
{
"x": 18,
"y": 2,
"w": 6,
"h": 1,
"i": "14"
},
{
"x": 18,
"y": 3,
"w": 6,
"h": 1,
"i": "15"
},
]
}
export default {
data() {
return {
// 布局数据
layoutData: [],
layoutConfig: {
collomn: 24, // 网格的列数，默认为12
rowsHeight: 30, // 每行的高度，默认150
maxRows: 30, // 网格最大行数
dialogVisible: true, // 是否可拖拽
isResizeable: false, // 是否可改变大小
isMirrored: true, // RTL/LTR 的转换 Boolean 非必填 默认为false
vertical: true, // 垂直方向上 是否应该紧凑布局 Boolean 非必填 默认为true
margin: [10, 10], // 网格之间的边距
useCss: true, // 是否使用css的transforms来排版 非必填 为false时 使用后采用定位方式来布局 默认为true
}
}
},
components: {
GridLayout,
GridItem
},
created() {
this.init()
},
methods: {
init() {
this.layoutData = layoutData.mainData
},
// 布局中单元改变事件 i, newX, newY 移动的坐标
// i, newH, newW, newHPx, newWPx 变化的大小
// newHPx, newWPx 是实际的像素
// newH, newW 是数据中的 以每个单位大小为基准点算
// 该元素放大缩小事件
resizeEvent(i, newH, newW, newHPx, newWPx) {
console.log("大小正在改变",i, newH, newW, newHPx, newWPx);
},
// 该元素移动事件
moveEvent( i, newX, newY) {
console.log("正在移动",i, newX, newY);
},
// 该元素放大缩小结束的事件
resizedEvent(i, newH, newW, newHPx, newWPx) {
console.log("大小改变完了",i, newH, newW, newHPx, newWPx);
},
// 该元素移动结束的事件
movedEvent( i, newX, newY) {
console.log("移动结束了", i, newX, newY);
},
// 布局创建事件
layoutCreatedEvent(newLayout) {
console.log(newLayout);
},
// 布局挂载之前事件
layoutBeforeMountEvent(newLayout) {
console.log(newLayout);
},
// 布局挂载事件
layoutMountedEvent(newLayout) {
console.log(newLayout);
},
// 布局准备事件
layoutReadyEvent(newLayout) {
console.log(newLayout);
},
// 布局更新事件
layoutUpdatedEvent(newLayout) {
console.log(newLayout);
}
},
}
script>