vuedraggable遇到的问题

最新推荐文章于 2025-10-09 03:54:10 发布

原创最新推荐文章于 2025-10-09 03:54:10 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #vuedraggable

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

一、拖拽无效：触发@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>