У меня есть набор карт, которые расположены вертикально и в настоящее время перетаскиваются. Когда вы перетаскиваете карту на другую, вы видите эту карту как полупрозрачную карту, парящую над целевой позицией, перед тем как отпустить, карты под позициями свопинга.
Я хочу знать, как вызвать такое поведение (поменять местами / показать анимацию движения вверх / вниз) без перетаскивания, например. нажимайте стрелки вверх / вниз.
Чтобы уточнить : «событие триггера» не вызывает метод, который реагирует на событие перемещения (окончание), но заставляет карты двигаться, как если бы мышь / палец перетаскивали карты в направлении (вверх /down).
На данный момент я добавил позиционный переключатель, который переупорядочивает массив, но он не запускает визуальный аспект, например. перетаскивание. Вы просто видите вспышку, а затем карты упорядочены по-разному.
см. Визуальное поведение
до движения
во время движения
после переезда
Перетаскиваемый компонент
<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
}