Блог

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

Вариант использования заключается в том, что если перетаскиваемый объект находится за пределами swapThreshold , но над целевым объектом, он должен иметь возможность быть перенесен на целевой объект, не меняясь местами с ним. Как только перетаскиваемый объект достигнет 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.Перетаскиваемый (2.20), но это также должно применяться при прямом использовании SortableJS

Используйте @dragover=»log» @touchmove=»log» в вашем li — не в перетаскиваемом компоненте.

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

 <li @dragover="log" @touchmove="log" v-for="item in itemsArray">{{item}}</li>