Как программно вызвать перетаскиваемое событие "move" одним кликом в Vue?

Question

У меня есть набор карт, которые расположены вертикально и в настоящее время перетаскиваются. Когда вы перетаскиваете карту на другую, вы видите эту карту как полупрозрачную карту, парящую над целевой позицией, перед тем как отпустить, карты под позициями свопинга.

Я хочу знать, как вызвать такое поведение (поменять местами / показать анимацию движения вверх / вниз) без перетаскивания, например. нажмите стрелки вверх / вниз.

Для пояснения: "вызвать событие", как не вызывать метод, который отвечает на событие перемещения (окончание), а заставить карты двигаться, как если бы мышь / палец перетаскивали карты в направлении (вверх / вниз).

На данный момент я добавил позиционный переключатель, который переупорядочивает массив, но он не запускает визуальный аспект, например. перетаскивание. Вы просто видите вспышку, а затем карты упорядочены по-другому.

Увидеть визуальное поведение

перед переездом

во время движения

после переезда

Перетаскиваемый компонент

<draggable v-model="things" :move="checkPosition" :options={animation:500}">
  <div v-for="(thing, index) in things">
    <div class="up" @clickSort"('up', index)">
    <div class="down" @clickSort"('up', index)">
  </div>
</draggable>

Соответствующие методы JS

watch: {
  things: {
    // this fires when you sort by dragging, as well as button click
    // loop over things
    // update vuex
  }
}

checkPosition(event) {
  if (event.related) {
    // code that keeps draggable item pos in scope of existing elements
    // some are hidden
    return !event.related.classList.contains('locked');
  }
}

clickDrag(direction, itemPos) {
  // manual array sorting, no draggable event eg. hover/motion/transition
}

Answer 1

Чтобы создать этот эффект перехода, вы должны использовать Ввод / Выход из перехода, предоставленные Vue https://vuejs.org/v2/guide/transitions.html

Вам нужно будет определить стили анимации CSS, которые Vue будет применять к вашим компонентам, когда вы захотите запустить анимацию, например, событие ondrop.