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

以上组件完整代码如下：

<template>
  <div class="helloWord">
    <h3>朋友列表</h3>
    <div id="list">梧桐芊雨
      <mt-cell class="cellmat" v-for="(item,index) in friends" :key="index"
        :title="item.name"
        :value="item.address"></mt-cell>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Sortable from 'sortablejs'
export default {
  name: 'HelloWorld',
  data () {
    return {
      friends: [],
      sortList: Object
    }
  },
  methods: {
    getFriend () {
      axios.get('../../static/mock/friend.json').then(this.getFriendInfo)
    },
    getFriendInfo (res) {
      if (res.data.success) {
        this.friends = res.data.data.friend
      }
    },
    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)
    }
  },
  mounted () {
    this.getFriend()
    var $ul = this.$el.querySelector('#list')
    this.sortList = Sortable.create($ul, {
      handle: '.cellmat',
      animation: 150,
      ghostClass: 'blue-background-class',
      onUpdate: (event) => {
        console.log('event值为：', event, event.newIndex, event.oldIndex)
        this.onUpEvent(event)
      }
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

5.拖动效果

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

未拖拽.png 已拖拽.png

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