拖拽图片达成图片排序

<template>
  <div>
    <div class="all-images">
      <img
        class="image"
        v-for="(image, index) in images"
        :key="index"
        :src="image"
        @dragstart="dragStart(image)"
        @dragend="dragEnd()"
        @dragover="onDragOver($event)"
      />
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      sortDialogVisible: false,
      images: [],
      targetSrc: "",
      currentSrc: "",
      submitImages: [],
    };
  },
  computed: {},
  watch: {},

  mounted() {
    const imgs = [
      "https://ts1.cn.mm.bing.net/th/id/R-C.823270fc68b9c58f0d9b3feb92b7b172?rik=aubbEBMSC86e%2bw&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50038%2f1181.jpg_wh860.jpg&ehk=iQboj4JMLLfDitOL7VJtSktED0AE%2f7Fyxfik0GTJkyQ%3d&risl=&pid=ImgRaw&r=0",
      "https://img95.699pic.com/photo/50050/3888.jpg_wh860.jpg",
    ]; // 是你自己的图片路径
    this.show(imgs);
  },
  methods: {
    show(images) {
      this.submitImages = images;
      this.images = images;
      this.sortDialogVisible = true;
    },
    dragStart(image) {
      this.currentSrc = image;
    },
    onDragOver(event) {
      this.targetSrc = event.target.currentSrc;
    },
    dragEnd() {
      if (this.currentSrc !== this.targetSrc) {
        const currentSrcIndex = this.submitImages.indexOf(this.currentSrc);
        const targetSrcIndex = this.submitImages.indexOf(this.targetSrc);
        this.submitImages.splice(currentSrcIndex, 1, this.targetSrc);
        this.submitImages.splice(targetSrcIndex, 1, this.currentSrc);
        //将转换之后的图片数组赋值给你将要返回给父组件的数组
        this.images = this.submitImages;
      }
    },
  },
  created() {},
};
</script>
<style scoped>
.all-images {
  display: flex;
  flex-wrap: wrap;
}
.image {
  width: 100px;
  margin: 5px;
}
</style>