<div :class="{drag:dragging}"> //... </div> data() { return { dragging: false }; }, methods: { onStart() { this.dragging = true; }, onEnd() { this.dragging = false; } } .drag { .component-box { display: none; } }
在开始拖动的时候给 .layout-container 添加 .drag 的 class 名。拖动结束时，移除class名。
将要移动的位置变灰
这里需要用到上面 ghostClass: "ghost" 配置项。并添加相应的css。
.ghost { .drag-handle { background: rgb(129, 168, 187); } }
好了基本已经实现了。。。
展示动态组件
接下来就是数据的动态展示了。 这里需要vue中的动态组件了。。附上官方文档连接点击查看。
然后里面每个拖动的元素的内容都写成组件，搭配动态组件实现自由拖动。
// 将所用组件引入 import { timeline, calendar, welcome, carousel, imgs, KonList } from "@/components/DragComponents"; components: { draggable, timeline, calendar, welcome, carousel, imgs, KonList }
配合 v-for 对数据进行循环，然后进行动态展示。
<component :is="element.name"/>
这块涉及到数据格式相关的，可以直接看文末的代码。。。 这里就就不展开说了。。
数据保持
在拖动结束后，我们需要将拖动的顺序缓存在前端，当下次进入后，可以继续使用拖动后的数据。
// 获取新的布局 getLayout() { let myLayout = JSON.parse(window.localStorage.getItem("kon")); if (!myLayout || Object.keys(myLayout).length === 0) myLayout = this.layout; const newLayout = {}; for (const side in myLayout) { newLayout[side] = myLayout[side].map(i => { return this.componentList.find(c => c.id === i); }); } this.mainData = newLayout; }, // 设置新的布局 setLayout() { const res = {}; for (const side in this.mainData) { const item = this.mainData[side].map(i => i.id); res[side]=item; } window.localStorage.setItem("kon", JSON.stringify(res)); }
这样我只需要在 mounted 中获取新的布局。。
mounted() {
this.getLayout();
}
在拖动结束后，设置新的布局
onEnd() {
this.dragging = false;
this.setLayout();
}
在项目中，还是建议配合后端进行用户布局的数据存储，每次拖动后将新的布局数据请求接口保存在数据库，同时存入缓存中。当再次进入页面的时候，读取缓存中的数据，没有的话请求后端的接口拿到用户的布局，然后再次存入缓存中。有的话直接读取缓存中的数据。
最后说两句
其实上面的效果也不是特别难，简单花点时间，看看相关文档，就能做出来，，记录在掘金上面，只是想和大家分享我的思路。同时希望和大家一起交流，一起进步。
生活不易，大家加油
附上源码： 项目地址
<template> <div :class="{drag:dragging}"> <div> <div :class="key" v-for="(item, key) in mainData" :key="key"> <draggable v-bind="dragOptions" :list="item" @end="onEnd" @start="onStart" > <transition-group> <div v-for="(element, index) in item" :key="index"> <div>{{ element.title }}</div> <div> <component :is="element.name"/> </div> </div> </transition-group> </draggable> </div> </div> </div> </template> <script> import draggable from "vuedraggable"; import { timeline, calendar, welcome, carousel, imgs, KonList } from "@/components/DragComponents"; export default { components: { draggable, timeline, calendar, welcome, carousel, imgs, KonList }, data() { return { dragging: false, componentList: [ { name: "KonList", title: "追番地址", id: "5" }, { name: "imgs", title: "五月最强新番", id: "4" }, { name: "timeline", title: "日程组件", id: "2" }, { name: "carousel", title: "走马灯组件", id: "1" }, { name: "calendar", title: "日历组件", id: "3" } ], layout: { left: ["5", "4"], right: ["2", "1", "3"] }, mainData: {} }; }, computed: { dragOptions() { return { animation: 30, handle: ".drag-handle", group: "description", ghostClass: "ghost", chosenClass: "sortable", forceFallback: true }; } }, mounted() { this.getLayout(); }, methods: { onStart() { this.dragging = true; }, onEnd() { this.dragging = false; this.setLayout(); }, getLayout() { let myLayout = JSON.parse(window.localStorage.getItem("kon")); if (!myLayout || Object.keys(myLayout).length === 0) myLayout = this.layout; const newLayout = {}; for (const side in myLayout) { newLayout[side] = myLayout[side].map(i => { return this.componentList.find(c => c.id === i); }); } this.mainData = newLayout; }, setLayout() { const res = {}; for (const side in this.mainData) { const item = this.mainData[side].map(i => i.id); res[side]=item; } window.localStorage.setItem("kon", JSON.stringify(res)); } } }; </script> <style lang="scss" scoped> .layout-container { height: 100%; display: flex; .left { flex: 1; margin-right: 40px; } .right { width: 550px; } .list-group-item { margin-bottom: 20px; border-radius: 6px; overflow: hidden; background: #fff; } .component-box { padding: 20px; } .drag-handle { cursor: move; height: 40px; line-height: 40px; color: #fff; font-weight: 700; font-size: 16px; padding: 0 20px; background: #6cf; } } .drag { .component-box { display: none; } } .list-enter-active { transition: all .3s linear; } .list-enter, .list-leave-to { opacity: .5; } .sortable { .component-box { display: none; height: 0; } } .list-group { > span { display: block; min-height: 20px; } } .ghost { .drag-handle { background: rgb(129, 168, 187); } } </style>
总结