[elementUI series 1] Vue drag and drop function implementation - vuedraggable realizes multi-layer nested drag and drop

Drag and drop functional components

Awe-dnd and vue-draggable made a comparison, and finally chose vue-draggable. As for the reasons:

1. @start and @end of vue-draggable will only be triggered at the beginning and end of the drag element movement, and will not be triggered during the process
2. awe-dnd will always monitor the dragging process, and will keep printing information during the dragging process

---

use

Introduction to various configurations: vuedraggable document

1. Install npm or yarn

yarn add vuedraggable
npm i -S vuedraggable

2. Introduce draggable in the vue project 

//导入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. Use draggable in the template

<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>

 The following points need attention

1. Multiple layers are embedded in the draggable area , and the class name should be added to the drag area, draggable='.class name' , so as to ensure that some parts of the draggable can be dragged and some cannot be dragged
2. The click event of el-image and the drag event of vue.draggable will have event conflicts, then you need to use the .stop and .prevent modifiers to disable the default event and bubbling.