1.在項目中總會遇見一些需要排序的數據 ， 我們可以通過vue.draggable 進行拖動排序 。
2.Draggable為基于Sortable.js的vue組件，用以實現拖拽功能。
3.拖頂的數據和data里的數據為雙向綁定 ，在界面變的時候data中的數據也在跟著變化。

安裝

npm i -S vuedraggable

使用

頁面引入

import draggable from "vuedraggable"

定義組件

  components: {
     draggable
  },

效果展示

low的效果圖

頁面使用

  <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的屬性：