图片简单的拖拽排序（vue，接近原生）

最新推荐文章于 2024-02-21 17:52:47 发布

是谁的心儿啊

最新推荐文章于 2024-02-21 17:52:47 发布

阅读量639

点赞数 1

CC 4.0 BY-SA版权

分类专栏：自己写的图片拖拽排序文章标签： javascript

本文链接：https://blog.csdn.net/dashinihao/article/details/119352506

自己写的图片拖拽排序专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种自定义实现的图片拖拽排序方法，该方法适用于Vue项目中，并解决了在使用高德地图API时VueDraggable插件失效的问题。通过监听特定事件，实现了基本的拖拽功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目需求做一个图片上传并且能够进行拖拽排序，项目中有引入了高德地图api

起初用的是vueDraggable，但是每次点击地图后整个页面的vueDraggable的拖拽功能失效了，无奈自己写了写，大体功能实现了但是没有插件的动画效果那么好

html部分

               <div
                class="mylist"
                :draggable="true"
                v-for="(item, index) in fileList"
                :key="item.name"
                @mouseleave="imgLeave(index)"
                @mouseenter="mouseenter(item,$event)"
                @dragstart="dragstart(item,$event)"
                @dragover="dragover(item,$event)"
                @drop="drop(item,$event)"
              >
                <div class=" myClose" >
                  <div class="mask" @click="imgClick(item,index)"> 
                    <a-icon type="close-circle" class="iconAppear" 
                      @click.stop="removeHandle(item)" 
                      style="position:absolute;cursor:pointer; top:5px;right:5px" /> 
                  </div>
                  <img style="width:100px;height:100px" 
                    :src="item.preview" 
                     @click="imgClick(item,index)" >
                </div>
              </div>

methods部分（js）

// 图片拖动排序相关
    mouseenter (itemValue, event) {
      // 兼容IE
      this.hoverAppear = true
      var ev = event || window.event
      ev.target.draggable = true
    },
    // 开始拖拽
    dragstart (itemValue, event) {
      // 兼容IE
      var ev = event || window.event
      // 阻止冒泡
      ev.stopPropagation()
      // 得到源目标数据
      this.sourceObj = itemValue
    },
    // 拖动元素经过的元素
    dragover (itemValue, event) {
      // 兼容 IE
      var ev = event || window.event
      // 阻止默认行为
      ev.preventDefault()
    },
    // 鼠标松开
    drop (itemValue, event) {
      // 兼容IE
      var ev = event || window.event
      // 阻止冒泡
      ev.stopPropagation()
      // 得到目标数据
      this.targetObj = itemValue
      this.fileList.map((item, index) => {
        if (item.uid === this.sourceObj.uid) {
          this.fileList.splice(index, 1)
        }
        if (item.uid === this.targetObj.uid) {
          this.fileList.splice(index, 1, this.sourceObj)
        }
      })
      this.fileList.map((item, index) => {
        if (item.uid === this.sourceObj.uid) {
          this.fileList.splice(index + 1, 0, this.targetObj)
        }
      })
    },

逻辑就是比如把最后一张图片拖到第一张先把第一张图片删除然后由最后一张代替，然后把原来的第一张添加到拖拽上来图片（原来的最后一张，现在的第一张）的后边，只是个简单的删除和添加

依照把最后一张拖到第一张的例子

fileList: 是图片数据，sourceObj：是你拖动的那张图片（举例来说就是最后一张），targetObj：是你拖动最终位置对应的图片数据（依照例子来说就是第一张）

通过事件传参把对应的图片数据（item）传过来