vue vuedraggable简单使用笔记

1、安装

cnpm i vuedraggable --save

2、使用

1、引入注册

import draggable from 'vuedraggable'
components: {
    draggable
  },

2、使用

 <draggable @update='imgDraggable' v-model="loadPhoto.Images" class="imgcontent" v-if="loadPhoto.Images.length>0">
                <transition-group>
                <div
                  class="block"
                  v-for="(fit, key) in loadPhoto.Images"
                  :key="key"
                  style="position: relative"
                >
                  <a :href='fit.filePath' target="_blank">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="fit.filePath"
                      fit="contain"

                    ></el-image>
                   </a>
                  <i
                    v-show="fit.thumbPath != null"
                    @click="deleteImage(fit.id, fit.version)"
                    class="item-icon el-icon-circle-close"
                  ></i>

                </div>
                </transition-group>
              </draggable>
              <el-empty v-else description="暂无数据"></el-empty>

 async imgDraggable(e){
      e.preventDefault();
      console.log(this.loadPhoto.Images,"拖拽后数组")
      //保存到数据库实现真正改变数据
      let res = await Type['updateDocumentFileSort'](this.loadPhoto.Images)
      if(res.code !==1) return this.$message.error(res.message);
 },