front/src/views/system/user/profile/components/test-drage.vue

<template>
  <!--  拖拽demo-->
  <transition-group name="drag"
                    class="list"
                    tag="ul"
  >
    <li
      v-for="(item, index) in sortList"
      :key="item.groupId"
    >
      <span>{{`第${index + 1}志愿:`}}</span>
      <span v-if="!btnDisabled" @dragenter="dragenter($event, index)"
            @dragover="dragover($event, index)"
            @dragstart="dragstart(index)"
            class="list-item move"
            draggable
            >{{ item.groupName }}</span>
      <span class="list-item" v-else>{{ item.groupName }}</span>
      <el-button style="cursor: pointer" @click="del(index)" size="mini" v-if="!btnDisabled"  type="danger">删除</el-button>
    </li>
  </transition-group>
</template>
<script>
export default {
  props: {
    selectedList: Array,
    btnDisabled: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      dragIndex: '',
      enterIndex: '',
      sortList: [],
    }
  },
  watch: {
    selectedList: {
      immediate:true,
      handler(val){
        this.sortList = val
      }
    }
  },
  methods: {
    dragstart(index) {
      this.dragIndex = index
    },
    dragenter(e, index) {
      e.preventDefault()
      // 避免源对象触发自身的dragenter事件
      if (this.dragIndex !== index) {
        const source = this.sortList[this.dragIndex]
        this.sortList.splice(this.dragIndex, 1)
        this.sortList.splice(index, 0, source)
        // 排序变化后目标对象的索引变成源对象的索引
        this.dragIndex = index
      }
    },
    shuffle() {
      this.sortList = this.$shuffle(this.sortList)
    },
    del(index) {
      this.sortList[index].selected = false
      this.sortList.splice(index,1)
    },
    dragover(e, index) {
      e.preventDefault()
    }
  }
}
</script>
<style lang="scss" scoped>
.list {
  padding-left: 0;
  list-style: none;

  .drag-move {
    transition: transform .3s;
  }
  li{
    font-size: 14px;
    margin-bottom: 6px;
  }
  .move{
    cursor: move;
  }
  .list-item {

    display:inline-block ;
    margin: 0 10px;
    width: 160px;
    background: #42b983;
    border-radius: 4px;
    font-size: 14px;
    color: #FFF;
    height: 30px;
    line-height: 30px;
    text-align: center;
  }
}
</style>