【elementUI系列一】vue拖拽功能实现-vuedraggable实现多层嵌套拖拽

拖拽功能组件

awe-dnd和vue-draggable做了一番比较，最终选择了vue-draggable，至于原因：

1. vue-draggable的@start和@end只会在拖拽元素移动的开始和结束时触发，过程中不会触发
2. awe-dnd会一直监听拖拽的过程，在拖拽的过程中会一直打印信息

使用

各项配置介绍：vuedraggable文文档

1.安装 npm或者yarn

yarn add vuedraggable
npm i -S vuedraggable

2.在vue项目中引入draggable 

//导入draggable组件
import draggable from 'vuedraggable';
......
export default {
  components: {
    draggable,
  },
  data() {
    return {
      imageUrlList: []
    };
  },
methods: {
    /**
     * @description: 预览的图片添加下载按钮
     */
    clickImage() {
    },
    /**
     * @description: 查看-大图预览, 先看当前大图
     * @param {Number} index 当前下标
     * @param {Array} imgList 所有大图
     * @return {Array} arr 当前图片为第一个的大图
     */
    getPreviewList(index, imgList) {
      let arr = [];
      let i = 0;
      for (i; i < imgList.length; i++) {
        arr.push(imgList[i + index].fileUrl);
        if (i + index >= imgList.length - 1) {
          index = 0 - (i + 1);
        }
      }
      return arr;
    },
  }
};

3.在模板中使用draggable

<draggable
            v-model="imageUrlList"
            animation="300"
            draggable=".drag-area"
          >
            <div
              class="drag-area"
              v-for="(item, index) in imageUrlList"
              :key="item.fileName"
            >
              <el-image
                @click.stop.prevent="clickImage"
                :src="item.fileUrl"
                :preview-src-list="getPreviewList(index, imageUrlList)"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
            <div class="el-upload__text">
               <em>点击上传</em>
             </div>
          </draggable>

 以下几点需要注意

1. draggable区域内嵌入多层，要把拖拽区域加上class名称，draggable=‘.class名’,这样就能确保draggable内部分可以拖拽，部分不能拖拽
2. el-image的点击事件和vue.draggable的拖拽事件会有事件冲突的问题，那么你需要使用.stop和.prevent修饰符来禁止默认事件和冒泡.