Group of horizontal lists
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
chikorita
#249
![pokemon](https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/152.png)
grass
bayleef
#250
![pokemon](https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/153.png)
grass
meganium
#251
![pokemon](https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/154.png)
grass
cyndaquil
#252
![pokemon](https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/155.png)
fire
quilava
#253
![pokemon](https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/156.png)
fire
typhlosion
#254
![pokemon](https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/157.png)
fire
totodile
#255
![pokemon](https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/158.png)
water
croconaw
#256
![pokemon](https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/159.png)
water
feraligatr
#257
![pokemon](https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/160.png)
water
treecko
#347
![pokemon](https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/252.png)
grass
grovyle
#348
![pokemon](https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/253.png)
grass
sceptile
#349
![pokemon](https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/254.png)
grass
torchic
#351
![pokemon](https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/255.png)
fire
combusken
#352
![pokemon](https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/256.png)
fire
fighting
blaziken
#353
![pokemon](https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/257.png)
fire
fighting
mudkip
#355
![pokemon](https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/258.png)
water
marshtomp
#356
![pokemon](https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/259.png)
water
ground
swampert
#357
![pokemon](https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/260.png)
water
ground
<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 pokemon2G = ref([] as Pokemon[]);pokemon2G.value = await fetchPokemons(9, 151);
const pokemon3G = ref([] as Pokemon[]);pokemon3G.value = await fetchPokemons(9, 251);
const { parent } = useDragAndDrop(pokemons, { droppableGroup: "group", direction: "horizontal", draggingClass: "dragging-pokemon",});const { parent: parent2 } = useDragAndDrop(pokemon2G, { droppableGroup: "group", direction: "horizontal", draggingClass: "dragging-pokemon",});
const { parent: parent3 } = useDragAndDrop(pokemon3G, { droppableGroup: "group", direction: "horizontal", draggingClass: "dragging-pokemon",});</script><template> <div class="flex max-sm:justify-center flex-col gap-4 max-sm:gap-0.5 items-start" > <div ref="parent" class="bg-gray-200/60 border-solid w-full border-black/40 rounded-2xl border-4 max-lg:p-1 p-4 max-sm:p-0.5 max-sm:border-2 flex flex-row overflow-x-auto gap-2 max-sm:gap-1" > <PokemonComponent class="min-w-44 max-sm:min-w-32" v-for="(pokemon, index) in pokemons" :key="pokemon.name" :index="index" :pokemon="pokemon" /> </div> <div ref="parent2" class="bg-gray-200/60 border-solid w-full border-black/40 rounded-2xl border-4 max-lg:p-1 p-4 max-sm:p-0.5 max-sm:border-2 flex flex-row overflow-x-auto gap-2 max-sm:gap-1" > <PokemonComponent class="min-w-44 max-sm:min-w-32" v-for="(pokemon, index) in pokemon2G" :key="pokemon.name" :index="index" :pokemon="pokemon" /> </div> <div ref="parent3" class="bg-gray-200/60 border-solid w-full border-black/40 rounded-2xl border-4 max-lg:p-1 p-4 max-sm:p-0.5 max-sm:border-2 flex flex-row overflow-x-auto gap-2 max-sm:gap-1" > <PokemonComponent class="min-w-44 max-sm:min-w-32" v-for="(pokemon, index) in pokemon3G" :key="pokemon.name" :index="index" :pokemon="pokemon" /> </div> </div></template>