List with handlers

bulbasaur

#1

grass

poison

ivysaur

#2

grass

poison

venusaur

#3

grass

poison

charmander

#5

fire

charmeleon

#6

fire

charizard

#7

fire

flying

squirtle

#10

water

wartortle

#11

water

blastoise

#12

water

Vue + Tailwind code

SingleVerticalListOfPokemonsWithHandler.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 handlerSelector = ".pokemon-handler";
const { parent } = useDragAndDrop(pokemons, {
  handlerSelector,
  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"
    >
      <PokemonComponent
        v-for="(pokemon, index) in pokemons"
        :key="pokemon.name"
        :index="index"
        :pokemon="pokemon"
        handler-class="pokemon-handler"
      />
    </div>
  </div>
</template>
<style>
<style>
.pokemon-handler {
  width: 0.625rem;
}
</style>