系列文章目錄

文章目錄

• 【elementUI系列二】el-image實現(xiàn)下載功能
• 【elementUI系列三】el-table多列排序（后端排序）并清除排序

拖拽功能組件

awe-dnd和vue-draggable做了一番比較，最終選擇了vue-draggable，至于原因：

1. vue-draggable的@start和@end只會在拖拽元素移動的開始和結(jié)束時觸發(fā)，過程中不會觸發(fā)
2. awe-dnd會一直監(jiān)聽拖拽的過程，在拖拽的過程中會一直打印信息

使用

各項配置介紹：vuedraggable文文檔

1.安裝 npm或者yarn

yarn add vuedraggable
npm i -S vuedraggable

2.在vue項目中引入draggable?

//導(dǎo)入draggable組件
import draggable from 'vuedraggable';
......
export default {
  components: {
    draggable,
  },
  data() {
    return {
      imageUrlList: []
    };
  },
methods: {
    /**
     * @description: 預(yù)覽的圖片添加下載按鈕
     */
    clickImage() {
      
    },
    
    /**
     * @description: 查看-大圖預(yù)覽, 先看當(dāng)前大圖
     * @param {Number} index 當(dāng)前下標(biāo)
     * @param {Array} imgList 所有大圖
     * @return {Array} arr 當(dāng)前圖片為第一個的大圖
     */
    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>

?以下幾點需要注意文章來源地址http://www.zghlxwxcb.cn/news/detail-430923.html

1. draggable區(qū)域內(nèi)嵌入多層，要把拖拽區(qū)域加上class名稱，draggable=‘.class名’,這樣就能確保draggable內(nèi)部分可以拖拽，部分不能拖拽
2. el-image的點擊事件和vue.draggable的拖拽事件會有事件沖突的問題，那么你需要使用.stop和.prevent修飾符來禁止默認事件和冒泡.

到了這里，關(guān)于【elementUI系列一】vue拖拽功能實現(xiàn)-vuedraggable實現(xiàn)多層嵌套拖拽的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！