draggable排序

1、页面

<ul class="t-upload__card">
  <draggable v-model="files_details" animation="400" @update="dragEnd">
    <li
      v-for="(item, index) in files_details"
      :key="index"
      class="t-upload__card-item t-is--background main_top"
    >
    </li>
  </draggable>
</ul>

2、方法

// 拖动图片顺序
dragEnd(e) {
  e.preventDefault() // 通知 Web 浏览器不要执行与事件关联的默认动作
  if (e.newIndex < e.oldIndex) { // 拖动图片到前面
    this.form.details.splice(e.newIndex, 0, this.form.details[e.oldIndex])
    this.form.details.splice(Number(e.oldIndex) + 1, 1)
  } else { // 拖动图片到后面
    this.form.details.splice(Number(e.newIndex) + 1, 0, this.form.details[e.oldIndex])
    this.form.details.splice(Number(e.oldIndex), 1)
  }
  // 替换拖动后图片数组索引数据
  this.$forceUpdate()
}