本文實例為大家分享了vue.draggable實現(xiàn)表格拖拽排序效果展示的具體代碼，供大家參考，具體內(nèi)容如下

成都創(chuàng)新互聯(lián)主營九原網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,app軟件開發(fā),九原h(huán)5成都小程序開發(fā)搭建,九原網(wǎng)站營銷推廣歡迎九原等地區(qū)企業(yè)咨詢

主要使用vuedraggable和sortablejs兩個組件。

1、安裝組件

npm install vuedraggable
npm install sortablejs

2、引入組件

import draggable from 'vuedraggable';
import Sortable from 'sortablejs';

export default {
  components: {
    draggable,
    Sortable
  },
  ....

3、HTML

我的例子是給表格排序，項目整體使用的是ivew，所以用了ivew的柵格來畫表格

  序號
  商品條碼
  商品名稱
  單位


  
    
      
{{index+1}}
    
    
      
{{item.barCode}}
    
    
      
{{item.name}}
    
    
      
{{item.unit}}
    
  

options中draggable的值是拖動的class。一開始怎么都不能拖動，加上這個就可以了。

4、兩個方法

move：拖動中
update：拖拽結(jié)束

getdata (data) {
  // console.log('getdata方法');
},
datadragEnd (evt) {
  // console.log('datadragEnd方法');
  console.log('拖動前的索引 :' + evt.oldIndex)
  console.log('拖動后的索引 :' + evt.newIndex)
}

表格的處理邏輯是：
1、當前行的id和排序號作為參數(shù)，調(diào)用后臺更改順序的方法
2、不論調(diào)用成功與否，都重新渲染表格數(shù)據(jù)

【注意】如果有分頁，那么傳給后臺的排序號就要再加上之前的條數(shù)，即（頁碼-1）*每頁條數(shù)

Vue.Draggable作者的git地址

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。