Vue+SortableJS上下拖拽排序

概述

sortableJS是一个非常功能强大的JavaScript 拖拽库，支持各种自定义的拖拽排序、上下排序、左右排序，树形结构拖拽排序，甚至支持跨元素排序拖拽，是个狠角色。
另外基于原生HTML5中的拖放API开发，使用很方便，触屏设备和大部分浏览器的兼容性支持也不错，值得推荐。

官网和Demo演示：http://www.sortablejs.com/

安装（二选一）

npm install sortablejs --save  // npm安装
bower install --save sortablejs // bower安装

引入使用

<template>
    <div ref="dragTable" class="sort-box">
        <div v-for="(item, index) in list" :key="index" class="list">
            {{item.name}}
        </div>
    </div>
</template>
<script>
import Sortable from 'sortablejs'
export default {
  data() {
    return {
      list: [
          { name: '排序1' },
          { name: '排序2' },
          { name: '排序3' }
      ],
      sortable: null,
      oldList: [],
      newList: []
    }
  },
  methods: {
      sortFn () {
        const el = document.querySelectorAll('.sort-box')[0]
        this.sortable = Sortable.create(el, {
        setData: function(dataTransfer) {
            dataTransfer.setData('Text', '')
        },
        onEnd: evt => {
            const targetRow = this.list.splice(evt.oldIndex, 1)[0]
            this.list.splice(evt.newIndex, 0, targetRow)
            const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
            this.newList.splice(evt.newIndex, 0, tempIndex)
        }
      })
    }
  }
}
</script>
<style scoped>
    .list{
        height: 40px;
        line-height: 40px;
        text-align: center;
    }
</style>