前端拖拽图片

大吉大利的卦象

已于 2023-03-01 17:28:18 修改

阅读量533

点赞数

分类专栏： vue 文章标签：前端 javascript html

于 2023-01-09 16:27:01 首次发布

本文链接：https://blog.csdn.net/weixin_44949068/article/details/128616533

版权

vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

该代码示例展示了如何在Vue.js应用中实现图片列表的拖放功能。利用dragstart、dragover和dragend事件，用户可以拖动图片并改变其在列表中的顺序。onDragOver方法更新目标图片源，onDragEnd方法处理图片位置交换。

摘要由CSDN通过智能技术生成

直接上代码吧，直接复制代码去调试
dragstart：当用户开始拖动一个元素或者一个选择文本的时候 dragstart 事件就会触发。

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

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

<template>
  <div>
    <div v-if="imagesList && imagesList.length" class="image-list">
      <div
        v-for="(item,index) in imagesList"
        :key="index"
        class="drag-image-list"
        draggable="true"
      >
        <el-image
          :src="item"
          alt=""
          fit="cover"
          @dragover="onDragOver" @dragend="onDragEnd(index)"
        ></el-image>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'draggable',
  data() {
    return {
      imagesList: ["https://aimkang.oss-cn-shanghai.aliyuncs.com/202301/20230109014639250_9c2cd14e-b8db-439b-87b9-8e54bf0ac7ff.jpg",
      "https://aimkang.oss-cn-shanghai.aliyuncs.com/202301/20230109014630841_9e3c7fe2-2b62-4d0e-964a-a7a4f3647c2b.png",
      "https://aimkang.oss-cn-shanghai.aliyuncs.com/202301/20230109014632757_a1832b10-7b5c-4194-97e7-db9cc12a1170.png",
      "https://aimkang.oss-cn-shanghai.aliyuncs.com/202301/20230109014634578_db794f5d-8d41-44eb-9c92-1ccb8a15c3f3.png",
      "https://aimkang.oss-cn-shanghai.aliyuncs.com/202301/20230109014636894_979d34c5-2b88-4a6d-a122-ac398cc29c34.png"],
      targetSrc: ''
    }
  },
  methods: {
   onDragOver(event) {
      event.preventDefault()
      const { src } = event.target
      this.targetSrc = src
    },
    onDragEnd(index) {
      const targetIdx = this.imagesList.indexOf(this.targetSrc);
      [this.imagesList[index], this.imagesList[targetIdx]] = [this.imagesList[targetIdx], this.imagesList[index]]
      this.imagesList = [...this.imagesList]
    }
  }
}
</script>

<style scoped lang="scss">
.image-list {
  display: flex;
  align-items: center;
  justify-content: center;
  .drag-image-list {
    .el-image {
      width: 148px;
      height: 148px;
      margin-right: 20px;
      cursor: pointer;
    }
  }
}
</style>