Как подключиться к событию перетаскивания SortableJS

Я пытаюсь подключиться к событию dragover/touchmove из библиотеки SortableJS (1.8.4). Элементы просто перетаскивают и меняют местами, но прослушивание этих событий не вызывает функцию обратного вызова, которую я им предоставил.

Случай использования заключается в том, что если перетаскиваемый находится вне swapThreshold, но над целью, она должна быть в состоянии быть сброшенной на цель, не меняя местами с ней. Как только Draggable достигает swapThreshold, он должен поменяться местами, как обычно.

<draggable
    v-model="itemsArray"
<!-- invert-swap="true"      - this helps, but the elements don't swap until the 
                               draggable is almost off of the target completely -->
<!-- swap-threshold="0.5"    - changing this didn't help -->
<!-- dragover-bubble="true   - seems to have no effect -->
    @dragover="log"       <!-- log() is not being called -->
    @touchmove="log"      <!-- log() is not being called -->
    :move="log"           <!-- log() IS called for :move, and @start, @end, etc. -->
>
  <li v-for="item in itemsArray">{{item}}</li>
</draggable>

(комментарии только здесь для ясности)

Я рассмотрел решение в move событие, но это вызывается только после того, как происходит обмен или ненадежно, как указано в моем комментарии выше о invert-swap имущество

Примечание: я использую Vue.Draggable (2.20), но это также должно применяться при прямом использовании SortableJS

1 ответ

Используйте @dragover="log" @touchmove="log" в своей библиотеке, а не в перетаскиваемом компоненте.

Что-то вроде этого:

<li @dragover="log" @touchmove="log" v-for="item in itemsArray">{{item}}</li>
Другие вопросы по тегам