# vue实现拖拉拽效果，类似于禅道首页可拖拽排布展示内容（插件-Grid Layout）

vue实现拖拉拽效果，类似于禅道首页可拖拽排布展示内容（插件-Grid Layout）

这个是类似与禅道那种首页有多个指标模块，允许用户自己拼装内容的那种感觉。

实现效果

插件资料

vue3版本

如果项目是vue3 的话使用的是 Grid Layout Plus。

官网：grid-layout-plus.netlify.app/zh/

文档：grid-layout-plus.netlify.app/zh/guide/in...

vue2版本

如果项目是vue2版本的话，可以使用 Vue Grid Layout。

官网：jbaysolutions.github.io/vue-grid-la...

文档：jbaysolutions.github.io/vue-grid-la...

vue3项目使用Grid Layout

使用的话也比较简单，现在以vue3使用为例介绍。

安装插件

安装的话只需要一行命令就可以执行：

bash 复制代码

npm i grid-layout-plus

or

yarn add grid-layout-plus

导入插件

导入的话直接在需要的页面导入就可以了：

javascript 复制代码

import {GridLayout, GridItem} from 'grid-layout-plus';

当然，也可以挂在到全局上面：

javascript 复制代码

app.component('GridLayout', GridLayout).component('GridItem', GridItem)

开发

引入之后就可以直接用了，这里可以根据官网文档进行开发，下面给一个小的案例：

javascript 复制代码

<template>
	<div class="ed-page">
		<GridLayout v-model:layout="layout" :col-num="24" :restore-on-drag="true" :vertical-compact="true" :row-height="50">
			<GridItem v-for="item in layout"
			          :key="item.i"
			          :x="item.x"
			          :y="item.y"
			          :w="item.w"
			          :h="item.h"
			          :i="item.i"
			          :is-resizable="item.isResizable">
				<p class="text">{{ item.i }}</p>
				<p class="text">{{ item.title }}</p>
				<p class="text">{{ item.url }}</p>
			</GridItem>
		</GridLayout>
	</div>
</template>
<script setup>
import {GridLayout, GridItem} from 'grid-layout-plus';
import {ref} from "vue";

const layout = ref([
	{
		x: 0,
		y: 0,
		w: 12,
		h: 5,
		i: '0',
		static: false,
		isResizable: false,
		url: "https://grid-layout-plus.netlify.app/zh/",
		title: "grid-layout-plus"
	},
	{x: 12, y: 0, w: 12, h: 5, i: '2', static: false},
]);

</script>
<style scoped lang="scss">
.ed-page {
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}

.vgl-layout {
	//background-color: #eee;
}

.vgl-layout::before {
	position: absolute;
	width: calc(100% - 5px);
	height: calc(100% - 5px);
	margin: 5px;
	content: '';
	background-image: linear-gradient(to right, #E9E9EB 1px, transparent 1px),
	linear-gradient(to bottom, #E9E9EB 1px, transparent 1px);
	background-repeat: repeat;
	background-size: calc(calc(100% - 5px) / 24) 60px;
}

:deep(.vgl-item:not(.vgl-item--placeholder)) {
	background-color: #FFF;
	border: 1px solid #909399;
}

:deep(.vgl-item--resizing) {
	opacity: 90%;
}

:deep(.vgl-item--static) {
	background-color: #cce;
}
</style>

看一下效果：

gif 动图可能有点卡顿，但是实际效果还是不错的，希望有用！拜拜！