vue 实战 区域内小组件元素拖拽 示例

<template><div><el-button type="primary" @click="showDialog = true">快捷布局</el-button><el-dialog title="快捷布局配置" :visible.sync="showDialog"><el-row :gutter="20"><el-col><el-card class="box-card" header="开始面板引流区"><draggable tag="div" class="buttons-container" v-model="drainComponents" ><el-button v-for="component in drainComponents" :key="component.comId" class="button" :style="{ backgroundColor: component.color }"><div class="button-content"><div>{{ component.name }}</div><div class="component-id">{{ component.comId }}</div></div></el-button></draggable></el-card></el-col><el-col><el-card class="box-card" header="开始面板数据区"><draggable tag="div" class="buttons-container" v-model="dataComponents" ><el-button v-for="component in dataComponents" :key="component.comId" class="button" :style="{ backgroundColor: component.color }"><div class="button-content"><div>{{ component.name }}</div><div class="component-id">{{ component.comId }}</div></div></el-button></draggable></el-card></el-col><el-col><el-card class="box-card" header="生活中默认区域"><draggable tag="div" class="buttons-container" v-model="liveComponents" ><el-button v-for="component in liveComponents" :key="component.comId" class="button" :style="{ backgroundColor: component.color }"><div class="button-content"><div>{{ component.name }}</div><div class="component-id">{{ component.comId }}</div></div></el-button></draggable></el-card></el-col></el-row><span slot="footer" class="dialog-footer"><el-button @click="showDialog = false">取消</el-button><el-button type="primary" @click="saveLayout">确定</el-button></span></el-dialog></div></template><script>import draggable from 'vuedraggable';// 生成柔和颜色的函数const generateSoftColor = () => {const hue = Math.floor(Math.random() * 360);const saturation = 60 + Math.random() * 20; // 饱和度在60%-80%之间const lightness = 70 + Math.random() * 20; // 亮度在70%-90%之间return `hsl(${hue}, ${saturation}%, ${lightness}%)`;};// 通用的转换函数const convertDataList = (dataList) => {return dataList.map(item => ({comId: item.comId,name: item.name,weight: item.weight,color: generateSoftColor()}));};const sortedDataList = (dataList) => {return dataList.slice().sort((a, b) => b.weight - a.weight);}// 数据列表const dataList1 = [{ comId: '1000009', name: '对方如果', property: 0, type: 0, weight: 4 },{ comId: '1000004', name: '辅导费人', property: 0, type: 0, weight: 1 },{ comId: '1000010', name: '电电风扇', property: 0, type: 0, weight: 2 },{ comId: '1000006', name: '小组件', property: 0, type: 0, weight: 3 },{ comId: '1000007', name: '飒飒飒飒', property: 0, type: 0, weight: 5 },{ comId: '1000011', name: '你说的分手', property: 0, type: 0, weight: 6 },{ comId: '1000012', name: '大润发儿童', property: 0, type: 0, weight: 9 },{ comId: '1000013', name: '大方的发过的', property: 0, type: 0, weight: 8 }];const dataList2 = [{ comId: '1000001', name: '哈哈哈', property: 0, type: 1, weight: 2 },{ comId: '1000005', name: '测试组件名称', property: 0, type: 1, weight: 2 },{ comId: '1000002', name: '啦啦啦', property: 1, type: 0, weight: 0 }];const dataList3 = [{ comId: '1000017', name: 'GV地方大幅度', property: 0, type: 0, weight: 3 },{ comId: '1000016', name: '奋斗奋斗发的', property: 0, type: 0, weight: 2 },{ comId: '1000008', name: '大幅度发', property: 0, type: 0, weight: 1 },{ comId: '1000003', name: '似懂非懂发', property: 1, type: 1, weight: 0 },{ comId: '1000014', name: '个人发一个发帖人', property: 0, type: 0, weight: 0 },{ comId: '1000015', name: '会更好多说点', property: 0, type: 0, weight: 0 }];export default {components: { draggable },data() {return {showDialog: false,drainComponents: convertDataList(sortedDataList(dataList1)),dataComponents: convertDataList(sortedDataList(dataList2)),liveComponents: convertDataList(sortedDataList(dataList3))};},methods: {generateSoftColor,convertDataList,removeColorSet(data) {for(let i=0;i<data.length;i++){delete data[i].color;}return data},updateWeights(data) {for(let i=0;i<data.length;i++) {data[i].weight = data.length - i;}return data},saveLayout() {this.showDialog = false;this.drainComponents = this.updateWeights(this.drainComponents)this.dataComponents = this.updateWeights(this.dataComponents)this.liveComponents = this.updateWeights(this.liveComponents)this.printComponentVal();// Remove 'color' field from each dictionary// this.drainComponents = this.removeColorSet(this.drainComponents)// console.log("this.drainComponents", this.drainComponents)// this.dataComponents = this.removeColorSet(this.dataComponents)// console.log("this.dataComponents", this.dataComponents)// this.liveComponents = this.removeColorSet(this.liveComponents)// console.log("this.liveComponents", this.liveComponents)},printComponentVal() {console.log("this.drainComponents", this.drainComponents)console.log("this.dataComponents", this.dataComponents)console.log("this.liveComponents", this.liveComponents)},}};</script><style scoped>.box-card {margin-bottom: 20px;}.buttons-container {display: flex;flex-wrap: wrap;}.button {margin: 5px;flex: 0 1 auto;display: flex;flex-direction: column;align-items: center;justify-content: center;}.button-content {text-align: center;}.component-id {font-size: 0.8em;color: #666;}.buttons-container .button:first-child {margin-left: 10px;}</style>