vue2实现拖拽排序效果

1、首先下载 vuedraggable 插件

npm i -S vuedraggable

2、使用方法

<template><div><div style="display: flex; justify-content: center; align-items: center"><div style="width: 120px; height: 60px; line-height: 60px; text-align: center; background-color: skyblue; cursor: pointer" @click="Acttive(1)">医疗资源</div><div style="width: 120px; height: 60px; line-height: 60px; text-align: center; background-color: yellow; cursor: pointer" @click="Acttive(2)">统计指标</div></div><div class="Analysis"><draggable v-model="filterList" chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd"><transition-group class="dra"><!-- <transition-group class="container" name="sort"> --><div class="list" :class="[activeListLeft == item.类别 ? 'activeList' : '']" @click="activeShowList(item, index)" v-for="(item, index) in filterList" :key="item.类别"><div class="list_title">{{ item.类别 }}</div><div class="list_content">{{ item.数量 }}</div></div><!-- </transition-group> --></transition-group></draggable></div></div>
</template><script>
import draggable from 'vuedraggable'
export default {data() {return {list: [{大类: '医疗资源',类别: '总医疗机构数',数量: 152},{大类: '医疗资源',类别: '总数据量',数量: 170725.52},{大类: '医疗资源',类别: '用药记录',数量: 14269.14},{大类: '医疗资源',类别: '手术记录',数量: 15.72},{大类: '医疗资源',类别: '入院记录',数量: 103.56},{大类: '医疗资源',类别: '全息影像',数量: 80976.25},{大类: '医疗资源',类别: '临时医嘱',数量: 14236.28},{大类: '医疗资源',类别: '健康档案数',数量: 103.5},{大类: '医疗资源',类别: '检验报告',数量: 35718.89},{大类: '医疗资源',类别: '护理记录',数量: 17355.15},{大类: '医疗资源',类别: '出院记录',数量: 70.76},{大类: '医疗资源',类别: '长期医嘱',数量: 7516.39},{大类: '医疗资源',类别: '病程记录',数量: 359.87},{大类: '统计指标',类别: '住院中成药收入',数量: 2017.14},{大类: '统计指标',类别: '住院中草药收入',数量: 5703.31},{大类: '统计指标',类别: '住院西药收入',数量: 22047.82},{大类: '统计指标',类别: '住院收入',数量: 90882.28},{大类: '统计指标',类别: '住院人次',数量: 103.56},{大类: '统计指标',类别: '业务总收入',数量: 192353.54},{大类: '统计指标',类别: '门诊中成药收入',数量: 12978.3},{大类: '统计指标',类别: '门诊中草药收入',数量: 16309.27},{大类: '统计指标',类别: '门诊西药收入',数量: 16358.23},{大类: '统计指标',类别: '门诊收入',数量: 101471.27}],filterList: [],activeListLeft: '总医疗机构数'}},components: {draggable},created() {this.activeListLeft = nullthis.filterList = this.list.filter(item => item.大类 == '医疗资源')},methods: {Acttive(item) {console.log(item)if (item == 1) {this.filterList = this.list.filter(item => item.大类 == '医疗资源')} else {this.filterList = this.list.filter(item => item.大类 == '统计指标')}},activeShowList(item, index) {console.log(item)//   this.$emit('activeShowListLeft', { item: item, index: index })}}
}
</script><style lang="scss" scoped>
.Analysis {margin-top: 30px;padding: 0 30px;display: flex;flex-wrap: wrap;justify-content: space-between;width: calc(100% - 60px);height: calc(100% - 40px);overflow: auto;.dra {display: flex;flex-wrap: wrap;justify-content: space-between;}.list {cursor: pointer;display: flex;flex-direction: column;align-items: center;justify-content: space-evenly;width: 19%;height: 60px;margin-bottom: 10px;box-shadow: inset 0px 0px 14px 1px #22abff;// box-shadow: inset 0px 0px 16px 1px #ffd061;border-radius: 5px 5px 5px 5px;opacity: 1;text-align: center;user-select: none;padding: 10px 25px;.list_title {width: 130px;font-size: 11px;}.list_content {width: 120px;font-size: 22px;font-family: PingFang SC, PingFang SC;color: #4affbd;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}}// 选中后的背景.activeList {box-shadow: inset 0px 0px 16px 1px #ffd061;}/* 如果最后一行是4个元素 */// .list:last-child:nth-child(3n - 1) {//   margin-right: calc(19% + 5% / 4);// }// /* 如果最后一行是3个元素 */// .list:last-child:nth-child(3n - 2) {//   margin-right: calc(38% + 10% / 4);// }/* 如果最后一行是2个元素 *///.list:last-child:nth-child(3n - 1) {//margin-right: calc(100% / 3 + 12px);//}
}
</style>