Vue拖拽 动态拖放并改变数据源

中文文档：https://www.itxst.com/vue-draggable/yvq3mifz.html

 详细api我这里不做介绍 可看官方文档 

<!-- delay按下多少才能拖动，防止用户误操作，单位ms -->
    <!-- animation 过渡的一个效果，不设置的话，体验效果是特别差的  -->
    <!-- ghostClass="ghostClass 设置拖动元素的占位符类名-->
    <!-- ghostClass="hostClass" 被选中目标的样式-->
    <!-- dragClass="dragClass" -->

安装

npm i -S vuedraggable

使用

引用  import draggable from 'vuedraggable'
注册  components: {draggable },

 页面

事件 

 

效果

数据源前后对比

 

 

手写上下移动数据

export const move = (status, index, arr) => { 
  // status: 0-表示上移|1-表示下移;index表示当前下标; arr数组
  const data = JSON.parse(JSON.stringify(arr)); // 数组属于引入类型
  if (status == 0) {
    if (index !== 0) { // 上移第一项无需上移
      data.splice(index - 1, 2, arr[index], arr[index - 1]);
    } else {
      console.log('已经是首项了')
    }
  } else if (status == 1) { // 下移最后一项无需下移
    if (index !== arr.length-1) {
      data.splice(index, 2, arr[index + 1], arr[index]);
    } else {
      console.log('已经是最后一项了')
    }
  }
  return data
}


//页面引用
   // 排序上
    orderUp(index) {
      this.resLink = move(0, index, this.resLink)
    },
    // 排序下
    orderDown(index) {
      this.resLink = move(1, index, this.resLink)
    },