<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>