vue拖拽排序

awe-dnd 一款可任意拖動排序的vue插件。支援桌面和移動端，拖拽過渡動畫美觀。支援vue1和vue2版本。

安裝：

npm install awe-dnd --save
           

引入：

import VueDND from 'awe-dnd'

Vue.use(VueDND)
           

頁面内容： 

<div class="list" id="items" v-for="item in feedList" v-dragging="{ item: item, list: feedList, group: 'item' }">
      <div class="list-con">
        <div class="list-title">
          <ul>
            <li class="list-name pfRegular">{{item.name}}</li>
            <li class="list-time">時間 {{item.time}}</li>
          </ul>
        </div>
        <div class="main">
          <ul>
            <li>
              <p class="num">{{item.num1}}</p>
              <p class="type-name">數量1</p>
            </li>
            <li>
              <p class="num">{{item.num2}}</p>
              <p class="type-name">數量2</p>
            </li>
            <li>
              <p class="num">{{item.num3}}</p>
              <p class="type-name">數量3</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
           

data(){
    returm{
       feedList:[{
        id:1,
        name:'内容1',
        time:'17:23',
        num1:100,
        num2:88,
        num3:1133.66
      },{
        id:2,
        name:'内容2',
        time:'17:23',
        num1:10,
        num2:88,
        num3:1133
      }]
   }
},  
mounted () {
    this.$dragging.$on('dragged', ({ value }) => {
      console.log(value.item)
      console.log(value.list)
    })
    this.$dragging.$on('dragend', () => {

    })
  }