vue脚手架-上传图片 图片拖拽(draggable)、更新（四）

目录：
一、拖拽
二、更新

先来看下效果，是不是你想要的吧~

现在把第四张，拖拽到第二张的位置，是以插入的形式进行的哦

开始的时候，预备着就是做个上传、删除的功能，到了后面公司又新增了需求，要求拖拽来改变排序。于是我就想着像这种拖拽的应该会有个插件，然后就找到了这个插件 Vue.Draggable ，我是通过这个来了解draggable的。然后在网上也看了别人的例子，然后很多人的都是把显示图片 添加 删除那些都暴露了出来，意味着我之前写的代码都可能得重写，加上我实现得这个不是就是个上传功能的图片墙，当然是能不多动已经写好的就不动写好的。于是就研究出了以下方法，虽然也要把那些暴露出来，但是仅仅修改了H5上的内容。

下载依赖：

npm i -S vuedraggable

在script中引入：

import draggable from 'vuedraggable' // 拖动插件

go~

一、拖拽
在template中加入draggable

   //拖拽
    <draggable
      class="el-upload-list el-upload-list--picture-card"  //这是图片墙的样式 必须
      v-model="upload.fileList" //绑定fileList 用来存放显示图片的空数组
                 // v-bind="dragOptions"  拖拽组件的配置 此处没用到 但是做个如何用的笔记
      @start="isDragging = true" //开始拖动时触发的事件
      @end="isDragging = false" //	拖拽完成时的事件
      @update="updateList" //拖拽变换位置时触发的事件
    >
    //这个div里面的内容可以代替掉，上篇文章中的放大编辑那些内容。
      <div
        class="el-upload-list__item"
        v-for="(item, index) in upload.fileList"
        :key="index"
      >
        <img
          :src="item.url"
          class="el-upload-list__item-thumbnail"
        >
        <span class="el-upload-list__item-actions">
          <!-- 放大 -->
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(item)"
          >
            <i class="el-icon-zoom-in"></i>
          </span>
          <!-- 编辑 -->
          <span
            class="el-upload-list__item-preview"
            @click="handleEditload(item)"
          >
            <i class="el-icon-edit"></i>
          </span>
          <!-- 删除 -->
          <span
            @click="handleRemove(item)"
            class="el-upload-list__item-delete"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </draggable>
    
     <!-- 上传 -->
    <el-upload
      ref="upload"
      list-type="picture-card"
      :show-file-list="false"
      :action="upload.action"
      :name="upload.fileParamsName"
      :multiple='false'
      :auto-upload='false'
      :data="uploadParams"
      :on-preview="handlePictureCardPreview"
      :on-change="changeAvatarUpload"
      :http-request="handleUpload"
      :before-upload="beforeAvatarUpload"
    >
      <i
        slot="default"
        class="el-icon-plus"
      ></i>
	//这里原本的放大 编辑的那些内容删除啦
    </el-upload>

拖拽组件的配置，此项目中未用到，仅做个笔记

  // 拖拽组件配置
    // dragOptions () {
    //   return {
    //     animation: 0, // 拖动时的动画效果
    //     group: 'description', // 相同组之间可以相互拖拽
    //     disabled: false, // 是否启用拖拽组件
    //     ghostClass: 'ghost' // 设置拖动元素的占位符类名,你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true
    //   }
    // }

实现拖拽后更新排序 提示：仅参考如何拿到新位置的旧位置即可，更新步骤还需优化

 // 拖拽更新数据
    async updateList (e) {
      const newIndex = e.newIndex// 新位置下标
      const oldIndex = e.oldIndex// 原始位置下标
      // 打印出新位置 位置从0开始算
      console.log(newIndex)
      // console.log(oldIndex)
      // 打印出来的为该位置的对象
      console.log(this.upload.fileList[newIndex])

      // 当图片向左/向上移动的时候
      if (newIndex < oldIndex) {
        this.upload.fileList[newIndex].order = this.upload.fileList[newIndex + 1].order
        // mobileNewIndex更新数据
        const mobileNewIndex = new FormData()
        mobileNewIndex.append('idBanner', this.upload.fileList[newIndex].banner)
        mobileNewIndex.append('order', this.upload.fileList[newIndex].order)
        const { data: newRes } = await this.$http.post('/update', mobileNewIndex)

        for (let n = newIndex + 1; n <= oldIndex; n++) {
          this.upload.fileList[n].order = this.upload.fileList[n].order + 1
          // 更新数据
          const mobileNewAddIndex = new FormData()
          mobileNewAddIndex.append('idBanner', this.upload.fileList[n].banner)
          mobileNewAddIndex.append('order', this.upload.fileList[n].order)
          const { data: newAddRes } = await this.$http.post('/update', mobileNewAddIndex)
        }
        
        // 当图片向右/向下移动的时候
      } else if (newIndex > oldIndex) {
        this.upload.fileList[newIndex].order = this.upload.fileList[newIndex - 1].order + 1
        for (let s = oldIndex; s <= newIndex; s++) {
          this.upload.fileList[s].order = this.upload.fileList[s].order - 1
          // 更新数据
          const mobileNewSubIndex = new FormData()
          mobileNewSubIndex.append('idBanner', this.upload.fileList[s].banner)
          mobileNewSubIndex.append('order', this.upload.fileList[s].order)
          const { data: newSubRes } = await this.$http.post('/banner/update', mobileNewSubIndex)
        }
      }
    }