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会自行更新;并支持过渡动画，并可以手动配置；