vue使用sortable.js实现文件拖拽

vue的Draggable拖拽：https://github.com/SortableJS/Vue.Draggable
sortablejs拖拽： https://www.npmjs.com/package/sortablejs
官方拖动的效果：http://sortablejs.github.io/Sortable/

1.安装sortable.js

npm install sortablejs --save

image.png

2.导入sortable并使用

在组件中导入sortable

import Sortable from 'sortablejs'

在组件中使用

image.png

以上画框打印台打印结果：

 onUpdate: (event) => {
        console.log('event值为：', event, event.newIndex, event.oldIndex)
        this.onUpEvent(event)
      }

image.png

  onUpEvent (e) {
      var item = this.friends[e.oldIndex]
      console.log(item)
      this.friends.splice(e.oldIndex, 1)
      this.friends.splice(e.newIndex, 0, item)
      console.log('拖动后的数据显示', this.friends)
    }

该方法被调用后就会修改friends数组中数据顺序，friends拖拽后数据顺序如下

image.png

image.png

image.png

以上组件完整代码如下：

5.拖动效果

将第一个拖动到最后一个，其效果如下：

未拖拽.png

已拖拽.png

若感兴趣，你可以使用以下文档来实现。
相关文档：
https://blog.csdn.net/A_bet_of_three_years/article/details/78417454