使用sorttable进行排序

<template>
  <div class="hello">
  <ul ref="sortTable">
    <li v-for="(v) in sortTable" :key="v" class="li">{{v}}</li>
  </ul>
  </div>
</template>

<script>
import Sortable from 'sortablejs'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data () {
    return {
      sortTable: [1,2,3,4,5,6,7,8,9,10,11,12]
    }
  },
  mounted() {
    this.setSort()
  },
  methods:{
    setSort () {
      const el = this.$refs.sortTable
      Sortable.create(el, {
        handle: '.li',
        animation: 200,
        // sorttable进行拖拽的时候并不改变原数组，想改变原数组就必须在拖拽完成后改变数据
        onEnd: ({ newIndex, oldIndex}) => {
          // 在拖动事件结束后把拖拽的值删掉
          const result = this.sortTable.splice(oldIndex, 1)
          // 在新的位置插入
          this.sortTable.splice(newIndex, 0, ...result)
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ul {
  list-style-type: none;
  padding: 0;
}
li:first-of-type{
  border-top: 1px solid gray;
}
li {
  margin: 0 10px;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid gray;
}
</style>