Как подключиться к событию перетаскивания 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>