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 動圖可能有點卡頓，但是實際效果還是不錯的，希望有用！拜拜！
