Vertical list on a scroller
bulbasaur
#1
![pokemon](https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png)
grass
poison
ivysaur
#2
![pokemon](https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/2.png)
grass
poison
venusaur
#3
![pokemon](https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/3.png)
grass
poison
charmander
#5
![pokemon](https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/4.png)
fire
charmeleon
#6
![pokemon](https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/5.png)
fire
charizard
#7
![pokemon](https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/6.png)
fire
flying
squirtle
#10
![pokemon](https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/7.png)
water
wartortle
#11
![pokemon](https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/8.png)
water
blastoise
#12
![pokemon](https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/9.png)
water
<script setup lang="ts">import { ref } from "vue";import { useDragAndDrop } from "vue-fluid-dnd";import type { Pokemon } from "./Pokemon";import PokemonComponent from "./PokemonComponent.vue";import { fetchPokemons } from "@/server/pokemonServer";
const pokemons = ref([] as Pokemon[]);pokemons.value = await fetchPokemons(9);const { parent } = useDragAndDrop(pokemons,{ draggingClass: "dragging-pokemon"});</script><template> <div class="flex max-sm:justify-center items-start"> <div ref="parent" class="bg-gray-200/60 border-solid border-black/40 rounded-2xl w-60 border-4 p-4 block overflow-auto max-h-[33rem]" > <PokemonComponent v-for="(pokemon, index) in pokemons" :key="pokemon.name" :index="index" :pokemon="pokemon" /> </div> </div></template>