vuedraggable遇到的问题

最新推荐文章于 2024-08-10 18:08:13 发布

xinxin_csdn

最新推荐文章于 2024-08-10 18:08:13 发布

阅读量2.1k

点赞数

文章标签： vue.js javascript 前端 vuedraggable

本文链接：https://blog.youkuaiyun.com/xinxin_csdn/article/details/133834596

版权

博客主要分析了vue-draggable组件的两个问题。一是拖拽无效，触发@start事件但不执行@end方法，原因是外层父组件用了vue-draggable-resizable封装的可拖拽弹框组件；二是拖拽后位置未变，@start、@end事件都执行，原因包括draggble绑定的v-mode和列表不一致，以及draggable组件未直接包含v-for。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、拖拽无效：触发@start事件，但不执行@end方法

原因：外层的父组件使用了vue-draggable-resizable组件封装的可拖拽的弹框组件

二、拖拽后位置未发生变化：@start、@end事件都执行

原因1、draggble绑定的v-mode和下方列表不一致

原因2、draggable组件必须直接包含v-for: draggable包在ul外层就出现了这个问题

<ul>
  <draggable
     v-model="list"
     handle=".mover"
     animation="300"
     :options="{
        sort: true
     }"
   >
  <li v-for="item in list" :key="item.id"></li>
 </draggable>
</ul>