vue + vuedraggable 实现拖拽功能以及列表中上传图片

场景：最近做的项目中有一个小功能：拖拽对应的图片，更换其位置及顺序

先上效果图： 

 主要用到的拖拽插件是：vuedraggable

完整代码：

<template>
    <div>
        <el-form :inline="true" v-loading="upLoading" element-loading-text="拼命上传中" element-loading-spinner="el-icon-loading">
            <draggable v-model="homePosterList"  chosenClass="chosen" forceFallback="true" group="people" animation="500" @end="onEnd" class="form-flex">
          <el-form-item class="el-form-item" v-for="(item,index) in homePosterList" :key="index">
            <el-card class="posterSort">
              <el-image :src="item.src"></el-image>
              <div class="homePosterBtn">
                <el-upload
                  :action="upUrl" :limit="2"
                  :show-file-list="false"
                  :on-success="function (res,file) {return handleAvatarSuccess(res,file,index)}"
                  :before-upload="beforeAvatarUpload" :data="{type:'2'}">
                  <el-button type="success">重新上传</el-button>
                </el-upload>
                <el-button class="deletePoster" type="danger" @click.prevent="removeDomain(item)">删除</el-button>
              </div>
            </el-card>
          </el-form-item>
          <el-form-item style="margin:0;width:100%;height:auto;">
            <el-button type="primary" @click="submitForm('homePosterList')">提交</el-button>
            <el-button @click="addDomain" :disabled="disabledPoster">添加广告位</el-button>
          </el-form-item>
            </draggable> 
        </el-form>
    </div>
</template>

<script>
import { goodsSort,setUp } from "@/api/sysManager";
import draggable from 'vuedraggable'
export default {
    data() {
      return {
        disabledPoster:false,
        upLoading:false,
        upUrl:process.env.BASE_API + '/common/upload', //图片上传地址,
        homePosterId:'',
        homePosterList:[]
      }
    },
    created(){
      this.getAppletHomePoster()
    },
    methods: {
      getAppletHomePoster(){
        goodsSort({"conditions":[{"type":"code","value":"ad_user_index"}]}).then(res=>{
          if(res.status==200&&res.data.length>0){
            this.homePosterId=res.data[0].id
            var imgListArr = JSON.parse(res.data[0].value)
            imgListArr.images.map(item=>{
              let obj={}
              obj.src=item
              console.log('obj',obj)
              this.homePosterList.push(obj)
            })
            console.log('首页广告位的数据：',this.homePosterList)
            if(this.homePosterList.length>=10){
              this.disabledPoster=true
            }
          }
        })
      },
      beforeAvatarUpload(file){//上传时
        const isJPG = (file.type==='image/png' || file.type==='image/jpeg' || file.type==='image/gif')
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('请上传jpg/png/jif格式的图片')
          return
        }
        if (!isLt2M) {
          this.$message.error('请上传小于 2MB 的图片!');
          return
        }
        this.upLoading=true
      },
      handleAvatarSuccess(res, file, index){//上传成功时
        console.log('上传成功res',res)
        console.log('上传成功file',file)
        console.log('上传成功index',index)
        this.homePosterList[index].src=process.env.VUE_APP_IMG+file.response.data[0].path
        this.upLoading=false
      },
      submitForm(formName) {//提交
        var imgJoin=[]
        this.homePosterList.map(item=>{
          imgJoin.push(item.src)
          if(item.src==""){
            this.$message.error('请先完善新增广告位图片！');
            return
          }
        })
        setUp(
          {"model":{
            "id":this.homePosterId,
            "value":JSON.stringify({"images": imgJoin})
          }
        }).then(res=>{
            if(res.status==200){
                this.$message.success('添加成功！');
                this.homePosterList=[]
                this.getAppletHomePoster()
            }
        })
      },
      removeDomain(item) {//删除
        var index = this.homePosterList.indexOf(item)
        if (index !== -1) {
          this.homePosterList.splice(index, 1)
        }
        if(this.homePosterList.length<9){
          this.disabledPoster=false
        }
      },
      addDomain() {//添加
        if(this.homePosterList.length<9){
          this.homePosterList.push({src:"http://jxyx-cs.ct56.net/upload/images/temp/1667290727403.jpg"});
        }else{
          this.$message.error('最多只能添加9个广告位');
          this.disabledPoster=true
        }
      },
      onEnd() {
         console.log('最新的排序顺序是：',this.homePosterList)
      },
    },
    components: {
        draggable,
    },
  }
</script>

<style scoped lang="scss">
  .el-card{overflow: inherit;}
  .form-flex{display:flex;flex-wrap:wrap;justify-content:start;}
  ::v-deep .el-form-item__content .el-image{margin:0 auto 20px;width:300px;height:140px;display:block;}
  .el-form--inline .el-form-item{margin:0 0 15px 0;height:200px;display:flex;justify-content:center;}
  .homePosterBtn{display:flex;align-items:center;justify-content: space-between;}
  .el-form-item{width:33.3333%;min-width:340px;height:auto !important;}
  .el-form-item .el-card{cursor:all-scroll;}
</style>

代码中都有注释，就不一个个介绍了