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

安裝

npm i -S vuedraggable

使用

頁(yè)面引入

import draggable from "vuedraggable"

定義組件

  components: {
     draggable
  },

效果展示

low的效果圖

頁(yè)面使用

  <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里面有兩個(gè)值，一個(gè)evt.added 和evt.removed  可以分別知道移動(dòng)元素的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 //可以知道拖動(dòng)的本身
      evt.to    // 可以知道拖動(dòng)的目標(biāo)列表
      evt.from  // 可以知道之前的列表
      evt.oldIndex  // 可以知道拖動(dòng)前的位置
      evt.newIndex  // 可以知道拖動(dòng)后的位置
    },
    move(evt, originalEvent) {
      console.log(evt , 'move')
      console.log(originalEvent) //鼠標(biāo)位置
    }

屬性和方法說明

屬性( Attributes)

draggable的屬性：