vue实现图片拖动排序

在实际工作中会遇到对图片拖动进行重新排序的功能，如下图：

随意拖动一张图到另外一个图片上面时，两张图片交换位置。
接下来为大家分享了vue实现图片拖动排序的具体代码，供大家参考，具体内容如下

原理：现有一个图片的列表，拖动其中一个图片（触发dragstart），当拖动的图片移动到其他图片的位置（触发dragover），则将拖动的图片从原位置移动到该位置（触发dragend）。

dragstart：当用户开始拖动一个元素或者一个选择文本的时候 dragstart 事件就会触发（我这里没有用）。

dragover：当元素或者选择的文本被拖拽到一个有效的放置目标上时，触发 dragover 事件(每几百毫秒触发一次)。

dragend：拖放事件在拖放操作结束时触发。

（1）图片列表HTML结构。给需要拖动的元素添加属性draggable。这里要注意：模板for循环的key值需要唯一，因为vue在渲染的时候会采用就地复用的方式，如果key值唯一，重新排序后渲染的列表节点不会复用，这样可以避免一些问题。（我们在插入的时候会根据序号向数组中插入某个数据）
代码如下：

这里我直接把拖动事件绑定到img上，这样更方便一些
事件代码如下：

完整代码如下：

<template>
  <el-dialog v-dialogDrag :close-on-click-modal="false" :close-on-press-escape="false" :modal-append-to-body="false"
             title="拖动调整图片顺序" :visible.sync="visible" :before-close="handleCancel"
             width="50%"
  >
    <div v-if="imgList && imgList.length" class="image-list">
      <ul ref="imgList"
          class="drag-container"
      >
        <li
          v-for="(item,idx) in imgList"
          :key="idx"
          class="drag-list"
          draggable="true"
        >
          <img
            :src="item"
            alt=""
            @dragover="onDragOver" @dragend="onDragEnd(idx)"
          >
        </li>
      </ul>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" :disabled="disabled" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'Dialog',
  data() {
    return {
      imgList: ['https://www.baidu.com', 'https://www.33333.com', 'https://www.55555.com', 'https://www.6666.com', 'https://www.7777.com'],
      targetSrc: ''
    }
  },
  methods: {
   onDragOver(event) {
      event.preventDefault()
      const { src } = event.target
      this.targetSrc = src
    },
    onDragEnd(idx) {
      const targetIdx = this.imgList.indexOf(this.targetSrc);
      [this.imgList[idx], this.imgList[targetIdx]] = [this.imgList[targetIdx], this.imgList[idx]]
      this.imgList = [...this.imgList]
    }
  }
}
</script>

<style scoped lang="scss">
.format_form_box {
  padding-top: 20px;
}

.drag-container {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  margin: 20px;
  padding-left: 0;
}

.drag-list {
  width: 200px;
  height: 150px;
  padding: 15px;
  margin-bottom: 10px;
  list-style: none;

  img {
    cursor: pointer;
    width: 100%;
    height: 100%;
  }
}
</style>

以上就是本文的全部内容，非常简单，希望对大家的学习有所帮助