Vue 实现图片拖拽功能

功能背景：

  需要对导航栏的icon，支持拖拽排序功能，然后自动保存。

原理讲解：

随意拖动一张图到另外一个图片上面时，两张图片交换位置。

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

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

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

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

接下来为大家分享了vue实现图片拖动排序的具体代码，供大家参考，具体内容如下

<template>
  <div v-for="item in navigationIcons" :key="item.id">
    <i draggable="true"
      @dragstart="dragStart(item)"
      @dragenter="onDragEnter(item,$event)"
      @dragend="onDragEnd"
      @dragover="onDragOver($event)"
      :class="item.className"
      :title="item.name
      @click="goNav(item.name)"
    >
   </i>
  </div>
</template>

<script>
import {navigationApi} from '@/api'
  export default {
   data() {
    return {
     oldData: null,
     newData: null,
     navigationIcons: [{
       id: 1,
       name: '打印',
       index: 1,
       className: 'iconfont icon-printer'
     },
    {
       id: 2,
       name: '全图',
       index: 2,
       className: 'iconfont icon-expend'
    }
    ]
    }
   },
   methods: {
     dragStart(value) {
       this.oldData = value
     },
    // 记录移动过程中信息
    onDragEnter(value,e) {
       this.newData = value
       e.preventDefault()
    },
    onDragEnd() {
      if(this.oldData !== this.newData) {
        let oldIndex = this.navigationIcons.indexOf(this.oldData)
        let newIndex = this.navigationIcons.indexOf(this.newData)
        let newItems = [...this.navigationIcons]
        // 删除老的节点
        newItems.splice(oldIndex, 1)
        // 在列表中目标位置增加新的节点
        newItems.splice(newIndex, 0, this.oldData)
        this.navigationIcons = [...newItems]
        for(let i=0; i< this.navigationIcons.length; i++) {
           this.navigationIcons[i].index = i
        }
        this.savaNavigationIcons()
      }
    },
    // 把数据存储到服务器
    savaNavigationIcons() {
      let params = {
        navigations" this.navigationIcons,
        type: 1, // 需要传的角色权限
    }
    const res = await navigationApi.updateIcon(params)
    const {success,msg} = res.data
    this.$message.success(msg)
    }
   }
 }
</script>