vue实现拖拉拽效果（插件-Grid Layout）
这个是类似与禅道那种首页有多个指标模块，允许用户自己拼装内容的那种感觉。
实现效果
插件资料
vue3版本
如果项目是vue3 的话使用的是 Grid Layout Plus。
官网：https://grid-layout-plus.netlify.app/zh/
文档：https://grid-layout-plus.netlify.app/zh/guide/installation.html
vue2版本
如果项目是vue2版本的话，可以使用 Vue Grid Layout。
官网：https://jbaysolutions.github.io/vue-grid-layout/zh/
文档：https://jbaysolutions.github.io/vue-grid-layout/zh/guide/
vue3项目使用Grid Layout
使用的话也比较简单，现在以vue3使用为例介绍。
安装插件
安装的话只需要一行命令就可以执行：
npm i grid-layout-plusoryarn add grid-layout-plus
导入插件
导入的话直接在需要的页面导入就可以了：
import {GridLayout, GridItem} from 'grid-layout-plus';
当然，也可以挂在到全局上面：
app.component('GridLayout', GridLayout).component('GridItem', GridItem)
开发
引入之后就可以直接用了，这里可以根据官网文档进行开发，下面给一个小的案例：
<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 动图可能有点卡顿，但是实际效果还是不错的，希望有用！拜拜！
