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 = null
    this.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>

3、参考链接
vue.draggable中文文档