vue中实现简单的列表排序（draggable）

首先 draggable=“true” 设置该元素为可拖动元素，然后添加对应方法

<template>
  <ul>
    <li 
      draggable="true" 
      @dragstart="onDragStart(item,index)"
      @dragover="onDragOver($event)"
      @drop="onDrop(index)" 
      v-for="(item,index) in list" 
      :key="index">{{ item.name }}</li>
  </ul>
</template>
<script>
export default {
  data () {
    return {
      list: [{name: '123444'}, {name:'测试机'}, {name: 'test'}, {name:'啦啦啦'}],
      currentItem: null,// 当前移移动的元素
      currentIndex: null //当前移动元素的下标
    }
  },
  methods:{
    // 拖拽 存储当前拖动的对象
    onDragStart(item,index) {
      this.currentItem = item // 当前移动元素
      this.currentIndex = index // 当前移动数组下标
    },
    // 当元素被拖动至有效拖放目标上方时运行脚本 去掉浏览器默认值
    onDragOver(ev) { 
      ev.preventDefault()
    },
    // 当被拖动元素正在被拖放时运行脚本 释放后排序
    onDrop(index) {
      if(index == this.currentIndex) return false // 不是原地移动
      this.list.splice(this.currentIndex,1) // 删除元素之前所在位置
      this.list.splice(index,0,this.currentItem) // 在需要放下元素的位置前插入移动元素
    },
  }
}
</script>
<style lang="less" scoped>
ul,li {
  list-style: none;
}
</style>
  

参考文章：https://blog.csdn.net/hope93/article/details/90740264