vue拖拽--實現表格行和列的拖拽 [sortable.js]---元素拖拽【vuedraggable】

【表格行列拖拽】vue+iview+sortable.js實現

安裝依賴

cnpm install sortable.js --save

組件里頭引入

import Sortable from 'sortablejs'

代碼

mounted() {
    this.rowDrop()
    this.columnDrop()
  },
methods: {
  //行拖拽【iview組件】
  rowDrop() {
    const tbody = document.querySelector('.ivu-table-tbody')
    const that = this
    const len = that.tableDataList.length
    console.log(len)
    Sortable.create(tbody, {
      onEnd({ newIndex, oldIndex }) {
        const currRow = that.tableDataList.splice(oldIndex, 1)[0]
        that.tableDataList.splice(newIndex, 0, currRow)
        console.log(that.tableDataList)
      }
    })
  },
//列拖拽 【elment組件】
    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          const oldItem = this.tableCols[evt.oldIndex]
          this.dropCol.splice(evt.oldIndex, 1)
          this.dropCol.splice(evt.newIndex, 0, oldItem)
        }
      })
    },
}

【元素拖拽】vue拖拽 【vuedraggable】

安裝依賴

cnpm i -S vuedraggable

組件里頭引入

import vuedraggable from 'vuedraggable';

代碼

vuedraggable

參考鏈接 vue draggable 與 vue-dragging

 

使用頁面： 
export default {
    components:{
        draggable
     }，
    methods:{
     datadragEnd(){
        console.log(this.wallList);
      }     
    }
},
<draggable v-model="wallList" class="showWall" group="people" @update="datadragEnd" @start="drag=true" @end="drag=false">
    <div v-for="element in myArray" :key="element.id">{{element.name}}</div> 
</draggable>
注：update相關方法調用后list會自行更新;並支持過渡動畫，並可以手動配置；