拖拽功能组件
awe-dnd和vue-draggable做了一番比较,最终选择了vue-draggable,至于原因:
vue-draggable的@start和@end只会在拖拽元素移动的开始和结束时触发,过程中不会触发awe-dnd会一直监听拖拽的过程,在拖拽的过程中会一直打印信息使用
各项配置介绍:vuedraggable文文档
1.安装 npm或者yarn
yarn add vuedraggablenpm 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>
以下几点需要注意
draggable区域内嵌入多层,要把拖拽区域加上class名称,draggable=‘.class名’,这样就能确保draggable内部分可以拖拽,部分不能拖拽el-image的点击事件和vue.draggable的拖拽事件会有事件冲突的问题,那么你需要使用.stop和.prevent修饰符来禁止默认事件和冒泡.