vue.js - 带有动态数据的 Vue JS 组件中的 jQuery UI 可拖放和可拖放

Question

我有一个视图组件，我希望能够将某些元素 ( .draggable) 拖到其他某些元素 ( .droppable) 上，如下所示：

<div>我可以像这样为静态元素设置它mounted()：

mounted(){
  $('.draggable').draggable({
    revert: true
  })

  $('.droppable').droppable({
    hoverClass: 'drop-hover',
    drop: function(){
      console.log('-= dropped =-')
    }
  })  
}
...
<div class="droppable">Drop Here</div>
<div class="draggable">Drag Me</div>
<div class="draggable">Drag Me</div>
<div class="draggable">Drag Me</div>

但是，当我想在 Vue JS 中动态执行此操作时v-for，jQuery UI 绑定似乎会丢失：

<div v-for="(item, index) in items">
  <div class="droppable">{{ item.name }}</div>
  <div v-for="(folder, index) in item.folders" class="draggable">{{ folder.name }}</div>
</div>

我不能再拖动这些.draggable项目。

据我了解，jQuery Draggable/Droppable 无法使用，.on因为我怀疑其中一个问题是我的 DOM 元素是在 jQuery 初始化之后生成的。我尝试将我的 jQuery 代码包装进去，this.$nextTick(() => { ... })但它仍然不起作用。

我也看过Vue.Draggable但我想要拖放而不同时重新排序。

是否可以将 jQuery Draggable/Droppable 与 Vue JS 中的动态数据结合起来？

标签： vue.jsjquery-uijquery-ui-draggablejquery-ui-droppablevuedraggable