vuedraggable+vue3使用踩坑记录

kumokoya

已于 2024-04-09 11:22:05 修改

阅读量232

点赞数 1

文章标签： vue.js 前端 javascript

于 2024-04-08 16:49:46 首次发布

本文链接：https://blog.csdn.net/kumokoya/article/details/137514659

版权

本文详细介绍了在Vue3中使用vuedraggable遇到的问题，如嵌套数据的处理、item-key选择、drag-class冲突以及如何处理占位元素。作者分享了对这些问题的解决策略。

摘要由CSDN通过智能技术生成

vuedraggable+vue3使用踩坑记录

文档

vuedraggable.next

基本使用

draggable(
   :list="dragTools"
   item-key="id"
   animation="300"
   group="flow"
   drag-class="dragging"
   filter=".no-drag"
   @start="onStartDrag"
   @end="drag = false"
   @change="onChangeDrag"
 )
   template(#item="{ element, index }")
   	 myComponent(:action="element.name")

如何嵌套使用时相互拖拽：group设置为相同参数
如果出现嵌套数据拖拽后空白/消失：item-key不要设为index，找一个唯一值
drag-class容易出现一碰就出现的问题，使拖动对象本体出现拖动class，暂无找到好的解决方法
当代入参数dragTools为空数组时，不会触发template的渲染判断，故如果需要保留当前区域为空的渲染状态or仍能将内容拖回空区域，需要在dragTools中新增一项作占位用，可以使用filter使占位元素无法被拖动