jQuery Пользовательский интерфейс с возможностью перетаскивания в Vue JS Компонент с данными Dynami c - PullRequest
Новая
       29

jQuery Пользовательский интерфейс с возможностью перетаскивания в Vue JS Компонент с данными Dynami c

0 голосов
/ 17 апреля 2020

У меня есть компонент вида, где я хочу иметь возможность перетаскивать определенные элементы (.draggable) на другие определенные элементы (.droppable), например:

example

Я могу настроить его для элементов c <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 пользовательского интерфейса теряются: 

<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 с динамическими c данными в Vue JS?

...