Как с помощью клика переместить элемент в блоке вверх?

Question

Олан

vue

Как с помощью клика переместить элемент в блоке вверх?

Как реализовать перемещение блоков div в контейнере container-slaid вверх по клику на соответствующие кнопки? Например, чтобы по клику на кнопку "Слайд 2" блок div с ref="slaid-2" поднимался вверх. Вопрос актуален для Vue 3 с использованием Composition API.

24 февраля 2024 г. 12:28

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для реализации данной функциональности в Vue 3 с использованием Composition API вам понадобится следующий код:

```html
<template>
  <div class="container-slaid">
    <div ref="slaid-1">Слайд 1</div>
    <div ref="slaid-2">Слайд 2</div>
    <div ref="slaid-3">Слайд 3</div>
    
    <button @click="moveSlaid('slaid-1')">Слайд 1</button>
    <button @click="moveSlaid('slaid-2')">Слайд 2</button>
    <button @click="moveSlaid('slaid-3')">Слайд 3</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const container = ref(null);

    const moveSlaid = (slaidRef) => {
      const slaid = container.value.querySelector(`[ref="${slaidRef}"]`);
      container.value.insertBefore(slaid, container.value.firstChild);
    }

    return {
      container,
      moveSlaid
    }
  }
}
</script>

<style>
.container-slaid {
  display: flex;
  flex-direction: column;
}
</style>
```

В данном примере у нас есть контейнер `div` с классом `container-slaid`, в котором содержатся блоки div с разными ref-ами. При клике на кнопку вызывается функция `moveSlaid`, которая перемещает соответствующий блок div вверх в контейнере. Кнопки связаны со слайдами по их ref атрибуту.

Надеюсь, этот код поможет вам реализовать нужную функциональность!

Answer 2

Данные слайдов сложить в массив. Сделать вычисляемое свойство - данные всех слайдов кроме верхнего. Создать верхний слайд, создать остальные слайды на основе вычисляемого свойства. Если нужна анимация перемещения, завернуть слайды в <code>transition-group</code> . <a href="https://play.vuejs.org/#eNqNVM1u2zAMfhXWGJAUSJ0VAbLNS4L9oIftsBXrsEs9oK4tJ2pkSZBkN0Xgh9kb7LDLsJfII42S4lgtim43kfxI8ftEcRu9lTJuahIl0UznikoDmphaLlJOKymUgS0oUo4gF5WsDSmghVKJCgaYNHh9QDUXjBZkH4rH35xpC1tMynPBNVa2Tg1zW3F4mXLA4rRIAKavRmDIxuBxsCKMiRHcCsWKo6MBtKMeePryRQ8s63wNZkU89D5wOp12QI8jDVF3ZkX50gO/Hwd9GSF9+74zXjNmwz6oiDYuahvvVBgOj2G+2BOKm4zVJC4pM0QNuQ1wOJrPD3U94NjWnI29yqgvGoZUkmWGoAUwK2jjDv4IOcu0nqcRz5o02gcwdF0bIzDZmwDNSSmUhQHl+4bSKAxbGTB+tfux+7P7ufu9+wXPtjymRXsVApPuvi1kuaENSQJdkAyHNoS/yRnN1wgPxOM9YDEb+0Y7RuOAnVEZ19RQwU+WStQSTLbESohII+BZRdDomPTEmxPnQ0a0DO7FlMQFHvjW5C7wIF10jh+rFsjXv3VYFWl15axsQZ3Z+CEV/5J7shjuHxhNbe6YPcZeYNha8HWWr20qx7FVpMAZARwzJlQCtytqCDpamx17RU4q0WX2dyeQMQbP44n2aJyy/VXRKDIaB7mky/hGC47/3OWmkR1lyoj6LG0FJJz4qjaG1cTtR+czqibuY7mcFcnXj/hv9Mb60ugcFSSqwQc4xEymlsT48NnFJxzGIFiJomaIfiL4hWjBatujh71DpbDtAOe6/eD2EP7vr/psYwgKsydlG7VIvx7SCHfS+yeo9+1O4onLQ0VRxX6jPbIq/aaQSki7JApSUk7OrTW8hIF7twG4jfOP73/48y7nMPyz1WSx3frPjQMIbYsNd7b93uiZjRH0X8Pn594RrpAsxek5fS43bvBkVhSoYeC5FqogOIuncgP4EHi7pgyX6f1Bi9q/dZoVEA==" rel="nofollow">Вот так всё просто</a> .