1.在專案中總會遇見一些需要排序的資料 ， 我們可以通過vue.draggable 進行拖動排序 。
2.Draggable為基於Sortable.js的vue元件，用以實現拖拽功能。
3.拖頂的資料和data裡的資料為雙向繫結 ，在介面變的時候data中的資料也在跟著變化。

安裝

npm i -S vuedraggable

使用

頁面引入

import draggable from "vuedraggable"

定義元件

  components: {
     draggable
  },

效果展示

頁面使用

  <draggable
            class="syllable_ul"
            element="ul"
            :list="syllable"
            :options="{group:'title', animation:150}"
            :no-transition-on-drag="true"
            @change="change"
            @start="start"
            @end="end"
            :move="move"
          >
            <transition-group type="transition"  :name="!drag? 'syll_li' : null" :css="true">
              <li v-for="(item , idx) in syllable" :key="idx">{{item.title}}</li>
            </transition-group>
          </draggable>
 

事件

 //evt裡面有兩個值，一個evt.added 和evt.removed  可以分別知道移動元素的ID和刪除元素的ID
    change(evt) {
      console.log(evt , 'change...')
    },
    //start ,end ,add,update, sort, remove 得到的都差不多
    start(evt) {
      this.drag = true
      console.log(evt , 'start...')
    },
    end(evt) {
      console.log(evt , 'end....')
      this.drag = true
      evt.item //可以知道拖動的本身
      evt.to    // 可以知道拖動的目標列表
      evt.from  // 可以知道之前的列表
      evt.oldIndex  // 可以知道拖動前的位置
      evt.newIndex  // 可以知道拖動後的位置
    },
    move(evt, originalEvent) {
      console.log(evt , 'move')
      console.log(originalEvent) //滑鼠位置
    }
 

屬性和方法說明

屬性( Attributes)

draggable的屬性：