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

编辑：rootadmin

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

推荐整理分享【elementUI系列一】vue拖拽功能实现-vuedraggable实现多层嵌套拖拽(elementui ts)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:elementui cn,el-elementui,elementuiicon,el-elementui,elementui cn,elementui cn,el-elementui,elementeui,内容如对您有帮助，希望把文章链接给更多的朋友！

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

vue-draggable的@start和@end只会在拖拽元素移动的开始和结束时触发，过程中不会触发awe-dnd会一直监听拖拽的过程，在拖拽的过程中会一直打印信息使用【elementUI系列一】vue拖拽功能实现-vuedraggable实现多层嵌套拖拽(elementui ts)

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

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

本文链接地址:https://www.jiuchutong.com/zhishi/289609.html 转载请保留说明！

上一篇：【web渗透】SSRF漏洞超详细讲解(web渗透实战)

下一篇：阿伦群岛三座岛中最小的伊尼希尔岛，爱尔兰戈尔韦湾 (© Chris Hill/Minden Pictures)(阿伦河在哪)