Skip to content

Group of vertical lists

bulbasaur
#1
pokemon
grass
poison
ivysaur
#2
pokemon
grass
poison
venusaur
#3
pokemon
grass
poison
charmander
#5
pokemon
fire
charmeleon
#6
pokemon
fire
charizard
#7
pokemon
fire
flying
squirtle
#10
pokemon
water
wartortle
#11
pokemon
water
blastoise
#12
pokemon
water
chikorita
#249
pokemon
grass
bayleef
#250
pokemon
grass
meganium
#251
pokemon
grass
cyndaquil
#252
pokemon
fire
quilava
#253
pokemon
fire
typhlosion
#254
pokemon
fire
totodile
#255
pokemon
water
croconaw
#256
pokemon
water
feraligatr
#257
pokemon
water
treecko
#347
pokemon
grass
grovyle
#348
pokemon
grass
sceptile
#349
pokemon
grass
torchic
#351
pokemon
fire
combusken
#352
pokemon
fire
fighting
blaziken
#353
pokemon
fire
fighting
mudkip
#355
pokemon
water
marshtomp
#356
pokemon
water
ground
swampert
#357
pokemon
water
ground
GroupOfListsOfPokemons.vue
<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",
draggingClass: "dragging-pokemon",
});
const { parent: parent2 } = useDragAndDrop(pokemon2G, {
droppableGroup: "group",
draggingClass: "dragging-pokemon",
});
const { parent: parent3 } = useDragAndDrop(pokemon3G, {
droppableGroup: "group",
draggingClass: "dragging-pokemon",
});
</script>
<template>
<div class="flex max-sm:justify-center gap-4 max-sm:gap-0.5 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-[30rem] max-lg:p-1 max-sm:p-0.5 max-sm:border-2"
>
<PokemonComponent
v-for="(pokemon, index) in pokemons"
:key="pokemon.name"
:index="index"
:pokemon="pokemon"
/>
</div>
<div
ref="parent2"
class="bg-gray-200/60 border-solid border-black/40 rounded-2xl w-60 border-4 p-4 block overflow-auto max-h-[30rem] max-lg:p-1 max-sm:p-0.5 max-sm:border-2"
>
<PokemonComponent
v-for="(pokemon, index) in pokemon2G"
:key="pokemon.name"
:index="index"
:pokemon="pokemon"
/>
</div>
<div
ref="parent3"
class="bg-gray-200/60 border-solid border-black/40 rounded-2xl w-60 border-4 p-4 block overflow-auto max-h-[30rem] max-lg:p-1 max-sm:p-0.5 max-sm:border-2"
>
<PokemonComponent
v-for="(pokemon, index) in pokemon3G"
:key="pokemon.name"
:index="index"
:pokemon="pokemon"
/>
</div>
</div>
</template>