vue - - - - 拖拽交换元素位置

1. 安装插件vuedraggable

npm install vuedraggable

2. 引入插件 & 声明组件

import draggable from "vuedraggable";
...
  components: {
    draggable
  },
  data(){
    return {
  	   tags: [
	      { id: 99999, key: "other", desc: "其它" }
	   ],
   	}
  },
  methods:{
    onEnd() {
      const tags = [].concat(this.tags);
      // 重置sort值
      tags.map((item, index) => {
        item.sort = index;
      })
      this.tags = tags;
    }
  }

3. 页面使用

        <draggable
          v-model="tags"
          chosen-class="chosen"
          force-fallback="true"
          group="people"
          animation="1000"
          @start="onStart"
          @end="onEnd"
        >
          <transition-group>
            <el-tag
              v-for="(tag,index) in tags"
              :key="tag.key"
              :type="computedType(index)"
              :closable="tag.key != 'all' && tag.key != 'other'"
              :disable-transitions="false"
              @close="handleClose(tag)"
            >{{tag.name}}</el-tag>
          </transition-group>
        </draggable>

根据自身需求，按需调整即可