### Install Fluid DnD using package managers

Source: https://fluid-dnd.netlify.app/vue/introduction/introduction

Instructions for installing the Fluid DnD library into your project using npm, yarn, or pnpm, the most common JavaScript package managers.

```bash
# with npm:
npm i fluid-dnd

# with yarn:
yarn add fluid-dnd

# with pnpm:
pnpm i fluid-dnd
```

--------------------------------

### Global setup of Fluid DnD composable in Vue.js

Source: https://fluid-dnd.netlify.app/vue/introduction/introduction

Demonstrates how to make the `useDragAndDrop` composable available throughout your entire Vue.js application by using Vue's provide/inject mechanism in your main application entry file.

```javascript
import { createApp } from "vue";
import App from './App.vue';
import { useDragAndDrop } from "fluid-dnd/vue";

const app = createApp(App);
app.provide('useDragAndDrop', useDragAndDrop);
app.mount('#app');
```

--------------------------------

### Vue Script Setup for Editable Drag-and-Drop List

Source: https://fluid-dnd.netlify.app/vue/guides/listinputs

This Vue <script setup> block initializes a reactive list of person objects, each with a number, name, and edit status. It imports ref from Vue for reactivity and useDragAndDrop from fluid-dnd/vue to enable drag-and-drop capabilities, assigning the parent ref for the draggable container.

```Vue
<script setup lang="ts">

import { ref } from "vue";

import { useDragAndDrop } from "fluid-dnd/vue";

const list = ref([

{ number: 1, name: "Carlos", edit: false },

{ number: 2, name: "Jorge", edit: false },

{ number: 1, name: "Ivis", edit: false },

]);

const [ parent ] = useDragAndDrop(list);

</script>
```

--------------------------------

### Local import of Fluid DnD composable in Vue.js component

Source: https://fluid-dnd.netlify.app/vue/introduction/introduction

Illustrates how to import the `useDragAndDrop` composable directly into a specific Vue.js component's script section for localized usage, providing flexibility for component-specific drag-and-drop functionalities.

```vue
<script>
import { useDragAndDrop } from 'fluid-dnd/vue';
</script>
```

--------------------------------

### Configure Vue Drag and Drop with Handler Selector

Source: https://fluid-dnd.netlify.app/vue/guides/styles/listhandler

This snippet demonstrates how to initialize the `useDragAndDrop` composable in a Vue 3 setup script, passing a `handlerSelector` option to specify a draggable handle. It imports necessary components and sets up a reactive list.

```Vue
<script setup lang="ts">

import { ref } from "vue";

import { useDragAndDrop } from "fluid-dnd/vue";

import Handler from "./icons/handler.vue";

const list = ref([1, 2, 3, 4, 5]);

const handlerSelector = ".handler";

const [ parent ] = useDragAndDrop(list, { handlerSelector });

</script>
```

--------------------------------

### Initialize Fluid DnD for List Insertion in Vue

Source: https://fluid-dnd.netlify.app/vue/guides/actions/listinsert

This snippet demonstrates the initial setup for using Fluid DnD to manage a list. It imports necessary functions from Vue and Fluid DnD, initializes a reactive list, and extracts the `parent` ref and `insertAt` function from `useDragAndDrop` for list manipulation.

```Vue
<script setup lang="ts">

import { ref } from "vue";

import { useDragAndDrop } from "fluid-dnd/vue";

const list = ref([]);

const [ parent, insertAt ] = useDragAndDrop(list);

</script>
```

--------------------------------

### Define CSS Styles for Elements Being Removed

Source: https://fluid-dnd.netlify.app/vue/guides/actions/listremove

Provides example CSS to style elements that have the `removed` class applied. It includes a transition for opacity, creating a smooth visual effect as items fade out before being fully removed.

```CSS
<style scoped>

.number{

/*

...

*/

opacity: 1;

transition: opacity 200ms ease;

}

.number.removed{

opacity: 0;

}

</style>
```

--------------------------------

### Initialize Horizontal List with Fluid DnD in Vue

Source: https://fluid-dnd.netlify.app/vue/guides/horizontallist

This Vue 3 setup script demonstrates how to create a reactive list of numbers and enable horizontal drag-and-drop functionality using the `useDragAndDrop` composable from Fluid DnD, specifying `direction: "horizontal"`.

```Vue
<script setup lang="ts">

const list = ref([1, 2, 3, 4, 5]);

const [ parent ] = useDragAndDrop(list, { direction: "horizontal" });

</script>
```

--------------------------------

### Initialize Fluid DnD for a Sortable List in Vue

Source: https://fluid-dnd.netlify.app/vue/guides/verticallist

This snippet demonstrates how to set up a reactive list and initialize the useDragAndDrop composable from fluid-dnd/vue in a Vue 3 <script setup> block. It prepares the data and the drag-and-drop functionality for a single vertical list by creating a ref for the list items and obtaining the parent reference for the draggable container.

```Vue
<script setup lang="ts">

import { ref } from "vue";

import { useDragAndDrop } from "fluid-dnd/vue";

const list = ref([1, 2, 3]);

const [ parent ] = useDragAndDrop(list);

</script>
```

--------------------------------

### Configure Droppable Class for Vue Lists

Source: https://fluid-dnd.netlify.app/vue/guides/styles/droppableclass

This Vue `script setup` block initializes two reactive lists (`list1`, `list2`) using the `useDragAndDrop` composable. Both lists are assigned to `droppableGroup: "group1"` and configured with `droppableClass: 'droppable-hover'`, which specifies the CSS class to be applied to a droppable element when a draggable item is dragged over it, providing visual feedback.

```TypeScript
<script setup lang="ts">

...

const list1 = ref([1, 2, 3, 4]);

const [ parent1 ] = useDragAndDrop(list1, {

droppableGroup: "group1",

droppableClass: 'droppable-hover'

});

...

const list2 = ref([5, 6, 7, 8]);

const [ parent2 ] = useDragAndDrop(list2, {

droppableGroup: "group1",

direction: "horizontal",

droppableClass: 'droppable-hover'

});

</script>
```

--------------------------------

### Chaining Multiple Coordinate Mappers in Vue

Source: https://fluid-dnd.netlify.app/vue/guides/events/mapcoordinates

This example illustrates how to apply multiple coordinate transformation functions sequentially using `coordinateTransform`. It combines the `lockAxis` function with a `gridTranslate` function to snap the dragged item to a defined grid size after locking the axis, showcasing how outputs of one mapper become inputs for the next.

```Vue
<script setup lang="ts">

//...

const gridTranslate = ({ x, y }: Coordinate) => {

const gridSize = 25.78;

return {

x: Math.ceil(x / gridSize) * gridSize,

y: Math.ceil(y / gridSize) * gridSize

};

};

//...

const [ parent ] = useDragAndDrop(list, {

coordinateTransform: [lockAxis, gridTranslate]

});

</script>
```

--------------------------------

### Vue: Handling Drag Start and End Events to Toggle Classes

Source: https://fluid-dnd.netlify.app/vue/guides/events/ondrag

This snippet demonstrates how to use `onDragStart` and `onDragEnd` events with Fluid DnD to dynamically toggle a CSS class (`marked-droppable`) on droppable elements. It utilizes `useTemplateRef` to get a reference to a group of droppables and iterates through them to apply or remove the class based on the drag state. The `useDragAndDrop` composable is configured with these event handlers for two lists.

```Vue
<script setup lang="ts">

...

const droppableGroup = useTemplateRef('droppableGroup')

function onDragStart(){

const droppables = droppableGroup.value?.querySelectorAll('.droppable-group-group1')??[]

for (const droppable of [...droppables]) {

droppable.classList.toggle('marked-droppable',true)

}

}

function onDragEnd (){

const droppables = droppableGroup.value?.querySelectorAll('.droppable-group-group1')??[]

for (const droppable of [...droppables]) {

droppable.classList.toggle('marked-droppable',false)

}

}

const list1 = ref([1, 2, 3, 4]);

const [ parent1 ] = useDragAndDrop(list1, {

droppableGroup: "group1",

onDragStart,

onDragEnd,

});

...

const list2 = ref([5, 6, 7, 8]);

const [ parent2 ] = useDragAndDrop(list2, {

droppableGroup: "group1",

direction: "horizontal",

onDragStart,

onDragEnd,

});

</script>
```

--------------------------------

### Initialize Vue list for scrollable drag-and-drop

Source: https://fluid-dnd.netlify.app/vue/guides/verticallistautoscroll

This Vue 3 setup script initializes a large array of numbers and binds it to a draggable parent element using `useDragAndDrop`. This prepares the data and the DOM reference for a list that will support drag-and-drop interactions within a scrollable container.

```Vue
<script setup lang="ts">\n\nconst list = ref([...Array(20).keys()]);\n\nconst [ parent ] = useDragAndDrop(list);\n\n</script>
```

--------------------------------

### Vue Script Setup for Draggable Table Data

Source: https://fluid-dnd.netlify.app/vue/guides/sortingtable

This Vue script block initializes a reactive `table` array of `Person` objects and integrates the `useDragAndDrop` composable from `fluid-dnd/vue`. It sets up the data structure for the table rows and configures the drag-and-drop behavior, including a `draggingClass` for visual feedback during dragging. The `parent` ref returned by `useDragAndDrop` will be bound to the draggable container in the template.

```TypeScript
<script setup lang="ts">

import { ref } from "vue";

import { useDragAndDrop } from "fluid-dnd/vue";

type Person = {

name: string;

age: number;

alias: string;

};

const table = ref<Person[]>([

{ name: "Carlos", age: 26, alias: "Carli" },

{ name: "Jorgito", age: 34, alias: "Pipo" },

{ name: "Ivis", age: 68, alias: "Mamá" },

]);

const [ parent ] = useDragAndDrop<Person>(table, {

draggingClass: "drag-row",

});

</script>
```

--------------------------------

### Define Grouped Lists for Drag and Drop in Vue

Source: https://fluid-dnd.netlify.app/vue/guides/events/mapvalues

This snippet demonstrates how to initialize two separate lists (`list` and `list2`) using `useDragAndDrop` from Fluid DnD, assigning them to the same `droppableGroup` ('group1'). This setup allows elements to be dragged and dropped between these lists, forming a logical group.

```Vue
<script setup lang="ts">

...

const list = ref([
{ id: "1", value: "Carcu", is_visible: true },
{ id: "2", value: "Rodri", is_visible: true },
{ id: "3", value: "Mbappe", is_visible: true },
]);

const [ parent1 ] = useDragAndDrop<Item>(list, {
droppableGroup: "group1"
});

const list2 = ref([
{ id: "11", label: "Cholo" },
{ id: "ab", label: "Popi" },
]);

const [ parent2 ] = useDragAndDrop<MinifiedItem>(list2, {
droppableGroup: "group1"
});

</script>
```

--------------------------------

### Configure Vue lists for multiple drag and drop groups

Source: https://fluid-dnd.netlify.app/vue/guides/listgroup

This example modifies the `droppableGroup` parameter for `list2` to include 'group2' in addition to 'group1'. This demonstrates how a list can belong to multiple groups, allowing for more complex conditional drag-and-drop interactions where elements can only be moved if groups overlap.

```Vue
<script setup lang="ts">

...

const list1 = ref([1, 2, 3, 4]);

const [ parent1 ] = useDragAndDrop(list1, {

droppableGroup: "group1",

});

...

const list2 = ref([5, 6, 7, 8]);

const [ parent2 ] = useDragAndDrop(list2, {

droppableGroup: "group1 group2",

direction: "horizontal",

});

</script>
```

--------------------------------

### Define lists with shared droppable group in Vue

Source: https://fluid-dnd.netlify.app/vue/guides/listgroup

This snippet shows how to initialize two reactive lists (`list1`, `list2`) and associate them with a common `droppableGroup` named 'group1' using the `useDragAndDrop` composable. This setup enables elements to be dragged and dropped between these two lists.

```Vue
<script setup lang="ts">

...

const list1 = ref([1, 2, 3, 4]);

const [ parent1 ] = useDragAndDrop(list1, {

droppableGroup: "group1",

});

...

const list2 = ref([5, 6, 7, 8]);

const [ parent2 ] = useDragAndDrop(list2, {

droppableGroup: "group1",

direction: "horizontal",

});

</script>
```

--------------------------------

### Vue: Accessing Drag Event Data (Value and Index)

Source: https://fluid-dnd.netlify.app/vue/guides/events/ondrag

This example illustrates how to access detailed information from `onDragStart` and `onDragEnd` events using `DragStartEventData` and `DragEndEventData` types from `fluid-dnd`. It demonstrates how to capture the `value` of the dragged element and the last dropped element, storing them in reactive references for display or further processing.

```Vue
<script setup lang="ts">

import { type DragEndEventData, type DragStartEventData } from "fluid-dnd";

//...

const draggedElement = ref<number | undefined>(undefined)

const lastDroppedElement = ref<number | undefined>(undefined)

function onDragStart(data: DragStartEventData<number>){

draggedElement.value = data.value;

//...

}

function onDragEnd (data: DragEndEventData<number>){

lastDroppedElement.value = data.value;

//...

}

//...

</script>
```

--------------------------------

### Vue Drag and Drop with Conditional Draggability

Source: https://fluid-dnd.netlify.app/vue/example/vertical-list/single-vertical-list-component-with-is-draggable

This Vue component uses `fluid-dnd/vue` to create a vertical list of draggable Pokemon. It demonstrates the `isDraggable` option, which is a function that determines if an element can be dragged. In this example, Pokemon classified as 'L' (Large) based on their weight are made non-draggable by adding the `is-not-draggable` class.

```Vue
<script setup lang="ts">

import { ref } from "vue";

import { useDragAndDrop } from "fluid-dnd/vue";

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 sizes = {

100: "S",

250: "M",

1200: "L",

};

const getSize = (weight: number) => {

for (const sizeLimit of Object.keys(sizes)) {

const limit = parseFloat(sizeLimit) as keyof typeof sizes;

if (weight < limit) {

return sizes[limit];

}

}

};

const [ parent ] = useDragAndDrop(pokemons, {

isDraggable: (el) => !el.classList.contains("is-not-draggable"),

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"

:class="{

'is-not-draggable': getSize(pokemon.weight) === 'L',

}"

/>

</div>

</div>

</template>

<style>

.is-not-draggable {

background-color: gray !important;

}

</style>
```

--------------------------------

### Define CSS Styles for Inserting Elements

Source: https://fluid-dnd.netlify.app/vue/guides/actions/listinsert

This CSS snippet provides styles for elements during the insertion process. The `.number` class defines a default opacity and transition, while the `.number.inserting` class sets the opacity to 0, creating a fade-in effect when an element is inserted and the 'inserting' class is applied.

```CSS
<style scoped>

.number{

/*

...

*/

opacity: 1;

transition: opacity 200ms ease;

}

.number.inserting{

opacity: 0;

}

</style>
```

--------------------------------

### Create Vue Template for List and Insertion Button

Source: https://fluid-dnd.netlify.app/vue/guides/actions/listinsert

This template defines the user interface for the draggable list. It uses a `ul` element bound to the `parent` ref for Fluid DnD functionality and iterates through the `list` to display elements. An 'Add' button is included, which calls `insertAt` to append new elements to the list.

```Vue
<template>

<ul ref="parent" class="number-list">

<li class="number" v-for="(element, index) in list" :index="index" :key="element">

{{ element }}

</li>

</ul>

<button class="insert-button" @click="insertAt(list.length, list.length)">+</button>

</template>
```

--------------------------------

### Initialize a Vue reactive list with mixed styles

Source: https://fluid-dnd.netlify.app/vue/guides/verticalliststyles

This JavaScript snippet defines a reactive `ref` named `list` in Vue, containing an array of objects. Each object represents a list item with a unique `id`, `content`, and an inline `style` string. This structure is crucial for maintaining distinct visual appearances for each element when using Fluid DnD, as it ensures styles are directly associated with the element rather than relying on positional CSS selectors.

```JavaScript
const list = ref([
{
id: "1",
style:
"margin: 30px 0px; border-style: solid; border-width: 0.8rem; padding: 5px;",
content: "1",
},
{
id: "2",
style:
"margin: 20px 0px; border-style: solid; border-width: 0.6rem; padding: 10px;",
content: "2",
},
{
id: "3",
style:
"margin: 10px 0px; border-style: solid; border-width: 0.4rem; padding: 15px;",
content: "3",
}
])
```

--------------------------------

### Vue.js Single Vertical Drag-and-Drop List Implementation

Source: https://fluid-dnd.netlify.app/vue/example/vertical-list/single-vertical-list

This Vue component demonstrates creating a draggable vertical list of Pokemon items. It uses `fluid-dnd/vue`'s `useDragAndDrop` composable to enable reordering, applies a `dragging-pokemon` class during drag, and allows configuring a `delayBeforeTouchMoveEvent` for touch devices. Data is fetched asynchronously, and individual items are rendered using `PokemonComponent.vue`.

```vue
<script setup lang="ts">

import { ref, watchEffect } from "vue";

import { useDragAndDrop } from "fluid-dnd/vue";

import type { Pokemon } from "../Pokemon";

import PokemonComponent from "./PokemonComponent.vue";

import { fetchPokemons } from "@/server/pokemonServer";

import touchDelaySilder from "./touchDelaySilder.vue";

import { isMobileDevice } from "@/utils/mobile.ts";

const pokemons = ref([] as Pokemon[]);

pokemons.value = await fetchPokemons(3);

const delay = ref(150);

let parent = ref<HTMLElement | undefined>();

watchEffect(() => {

const dragAndDrop = useDragAndDrop(pokemons, {

draggingClass: "dragging-pokemon",

delayBeforeTouchMoveEvent: delay.value

});

parent = dragAndDrop[0];

});

</script>

<template>

<div class="flex-col gap-4">

<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"

/>

</div>

</div>

<touchDelaySilder v-if="isMobileDevice()" v-model="delay" />

</div>

</template>
```

--------------------------------

### Initialize Fluid DnD for List Element Removal (Vue)

Source: https://fluid-dnd.netlify.app/vue/guides/actions/listremove

Demonstrates how to set up a reactive list in Vue and extract the `removeAt` function from `fluid-dnd/vue`'s `useDragAndDrop` composable, which is essential for programmatically removing elements from the list.

```Vue
<script setup lang="ts">

import { ref } from "vue";

import { useDragAndDrop } from "fluid-dnd/vue";

const list = ref([1, 2, 3, 4, 5]);

const [ parent,_, removeAt ] = useDragAndDrop(list);

</script>
```

--------------------------------

### Implement Drag and Drop for Multiple Pokemon Lists in Vue

Source: https://fluid-dnd.netlify.app/vue/example/vertical-list/group-vertical-lists

This Vue.js component demonstrates how to create and manage multiple vertical lists of Pokemon using the `fluid-dnd` library for drag-and-drop functionality. It fetches Pokemon data for three different generations, initializes separate reactive arrays for each, and applies `useDragAndDrop` to enable seamless reordering and transfer of Pokemon between these lists.

```Vue
<script setup lang="ts">

import { ref } from "vue";
import { useDragAndDrop } from "fluid-dnd/vue";
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 [ parent2 ] = useDragAndDrop(pokemon2G, {
droppableGroup: "group",
draggingClass: "dragging-pokemon",
});

const [ 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"

```

--------------------------------

### Set Insertion Delay for Fluid DnD in Vue

Source: https://fluid-dnd.netlify.app/vue/guides/actions/listinsert

This snippet demonstrates how to introduce a delay before an element is visually inserted into the list. The `delayBeforeInsert` option in `useDragAndDrop` allows specifying a time in milliseconds, providing more control over the animation timing (default is 200ms).

```Vue
<script setup lang="ts">

// ...

const { parent, removeAt } = useDragAndDrop(list,{

insertingFromClass: "inserting",

delayBeforeInsert: 800

});});

</script>
```

--------------------------------

### Vue Template and Styles for Horizontal List

Source: https://fluid-dnd.netlify.app/vue/guides/horizontallist

This snippet provides the Vue template structure and basic CSS for rendering the horizontal list. It uses a `div` with a `ref` for the drag-and-drop parent and iterates over the list elements, applying flexbox to ensure a horizontal layout.

```Vue
<template>

<div ref="parent" class="number-list">

<div class="number" v-for="(element, index) in list" :index="index">

{{ element }}

</div>

</div>

</template>

<style>

/* ... */

.number-list {

display: flex;

flex-direction: row;

}

</style>
```

--------------------------------

### Vue Component Iteration and Styling

Source: https://fluid-dnd.netlify.app/vue/example/vertical-list/group-vertical-lists

This Vue.js template fragment demonstrates how to apply Tailwind CSS-like utility classes for styling a container, followed by iterating over a 'pokemon3G' array using 'v-for' to render multiple 'PokemonComponent' instances. Each component receives 'pokemon' data and its 'index' as props, and the container is styled for overflow and responsiveness.

```Vue Template
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>
```

--------------------------------

### Render a Sortable Vertical List with Basic Styles in Vue

Source: https://fluid-dnd.netlify.app/vue/guides/verticallist

This snippet shows the Vue template structure for rendering a sortable list of numbers, iterating over the list array. It also includes basic CSS styles to visually represent the list items and the container, making them suitable for drag-and-drop operations. This is the next step after initializing the list in the script.

```Vue
<template>

<ul class="number-list">

<li class="number" v-for="(element, index) in list">

{{ element }}

</li>

</ul>

</template>
```

```CSS
<style>

.number {

border-style: solid;

padding-left: 5px;

margin-top: 0.25rem;

border-width: 2px;

}

.number-list {

display: block;

padding: 10px;

}

</style>
```

--------------------------------

### Render draggable and droppable lists in Vue template

Source: https://fluid-dnd.netlify.app/vue/guides/listgroup

This code defines the HTML template for displaying the two lists (`list1`, `list2`) configured for drag and drop. It uses `ref` to bind the parent elements to the `useDragAndDrop` composable and `v-for` to render individual list items, making them interactive.

```Vue
<template>

<div class="group-list">

<ul ref="parent1" class="number-list">

<li

class="number"

v-for="(element, index) in list1"

:index

:key="element"

>

{{ element }}

</li>

</ul>

<div ref="parent2" class="number-list-h">

<div

class="number"

v-for="(element, index) in list2"

:index

:key="element"

>

{{ element }}

</div>

</div>

</div>

</template>

<style>

...

</style>
```

--------------------------------

### Render Draggable List and Define Dragging Styles in Vue Template

Source: https://fluid-dnd.netlify.app/vue/guides/styles/draggingclass

This snippet provides the Vue template structure for rendering the draggable list, binding the `ul` element to the `parent` ref for Fluid DnD functionality. It also includes the associated CSS, defining the `.dragging` class with transition, background-color, and color properties to visually highlight dragged items.

```Vue
<template>

<ul ref="parent" class="block px-6 p-8">

<li

class="number border-solid mt-1 pl-1 border-2"

v-for="(element, index) in list"

:index="index"

>

{{ element }}

</li>

</ul>

</template>

<style>

/*....*/

.dragging {

transition: background-color color 150ms ease-in, color 150ms ease-in;

background-color: var(--sl-color-gray-1);

color: black;

}

</style>
```

--------------------------------

### Vue Template and Styles for Editable Drag-and-Drop List Rendering

Source: https://fluid-dnd.netlify.app/vue/guides/listinputs

This snippet defines the Vue template and associated CSS for rendering the editable list. The <ul> element is bound to the parent ref for drag-and-drop. Each <li> iterates over the list data, displaying an editable text input for the person's name and a checkbox to toggle edit mode, along with basic styling for the list and its items.

```Vue
</script>

<template>

<ul ref="parent" class="person-list p-8 bg-[var(--sl-color-gray-6)]">

<li class="person" v-for="(person, index) in list" :index="index">

<input type="text" v-model="person.name" :disabled="!person.edit" />

<input type="checkbox" v-model="person.edit" />

</li>

</ul>

</template>

<style>

.person {

border-style: solid;

padding-left: 5px;

margin-top: 0.25rem;

border-width: 2px;

}

.person input[type="text"] {

width: 100px;

margin: 10px;

}

.person-list {

display: block;

padding-inline: 25px;

}

</style>
```

--------------------------------

### Initialize Draggable List with Custom Dragging Class in Vue

Source: https://fluid-dnd.netlify.app/vue/guides/styles/draggingclass

This Vue Composition API snippet demonstrates how to set up a reactive list of numbers and make it draggable using `useDragAndDrop` from `fluid-dnd/vue`. It configures the `draggingClass` option to apply a specific CSS class, 'dragging', to elements while they are being dragged, enabling custom visual feedback.

```Vue
<script setup lang="ts">

import { ref } from "vue";

import { useDragAndDrop } from "fluid-dnd/vue";

const list = ref([1, 2, 3]);

const [ parent ] = useDragAndDrop(list,{
	draggingClass: "dragging",

});

</script>
```

--------------------------------

### Vue template for rendering a draggable list with mixed styles

Source: https://fluid-dnd.netlify.app/vue/guides/verticalliststyles

This Vue template demonstrates how to render the `list` defined previously, applying each element's unique `style` attribute. The `ul` element is referenced by `parent`, which is typically used with the `useDragAndDrop` composable to enable drag-and-drop functionality. The `v-for` directive iterates over the `list`, binding `index` and `style` to each `li` element, ensuring individual styling is preserved during reordering.

```Vue
<template>
<ul ref="parent" class="number-list" style="height: 280px">
<li
class="number"
v-for="(element, index) in list"
:index="index"
:style="element.style"
>
{{ element.content }}
</li>
</ul>
</template>
```

--------------------------------

### Define Vue Template and CSS for Droppable Styles

Source: https://fluid-dnd.netlify.app/vue/guides/styles/droppableclass

This snippet provides the Vue template structure for the two lists, `parent1` and `parent2`, which will serve as droppable containers. It also includes the corresponding CSS rules (`.number-list.droppable-hover` and `.number-list-h.droppable-hover`) that define the visual appearance (e.g., background color change) when a draggable element is hovered over these droppable areas, enhancing user interaction feedback.

```HTML
<template>

<div class="group-list">

<ul ref="parent1" class="number-list">

<!-- ...  -->

</ul>

<div ref="parent2" class="number-list-h">

<!-- ...  -->

</div>

</div>

</template>
```

```CSS
<style>

/*...*/

.number-list {

/*...*/

transition: background-color 150ms ease-in;

}

.number-list.droppable-hover{

/*...*/

background-color: var(--sl-color-gray-3);

}

.number-list-h {

/*...*/

transition: background-color 150ms ease-in;

}

.number-list-h.droppable-hover{

background-color: var(--sl-color-gray-3);

}

</style>
```

--------------------------------

### Configure Inserting Class for Fluid DnD in Vue

Source: https://fluid-dnd.netlify.app/vue/guides/actions/listinsert

This snippet shows how to configure `useDragAndDrop` to apply a specific CSS class when an element is being inserted. By setting `insertingFromClass` to 'inserting', developers can define custom styles that are active during the insertion animation.

```Vue
<script setup lang="ts">

// ...

const { parent, removeAt } = useDragAndDrop(list,{

insertingFromClass: "inserting"

});

</script>
```

--------------------------------

### Vue: Defining Drag-and-Drop Lists in Template

Source: https://fluid-dnd.netlify.app/vue/guides/events/ondrag

This template snippet shows the HTML structure for the drag-and-drop lists. It defines a parent `div` with a `ref` attribute (`droppableGroup`) to be referenced in the script, and two `ul` and `div` elements with `ref` attributes (`parent1`, `parent2`) that serve as the drag-and-drop containers for the lists.

```Vue
<template>

<div ref="droppableGroup" class="group-list">

<ul ref="parent1" class="number-list">

<!-- ... -->

</ul>

<div ref="parent2" class="number-list-h">

<!-- ... -->

</div>

</div>

</template>

<style>

...

</style>
```

--------------------------------

### Create Vue Template for Draggable List with Removal Buttons

Source: https://fluid-dnd.netlify.app/vue/guides/actions/listremove

Illustrates the Vue template structure for a draggable list. Each list item includes a button that triggers the `removeAt` function, allowing users to remove specific elements by their index.

```Vue
<template>

<ul ref="parent" class="number-list">

<li class="number" v-for="(element, index) in list" :index="index" :key="element">

{{ element }}

<button class="remove-button" @click="removeAt(index)">x</button>

</li>

</ul>

</template>
```

--------------------------------

### Render Draggable List with Handler in Vue Template

Source: https://fluid-dnd.netlify.app/vue/guides/styles/listhandler

This Vue template snippet shows how to render a list of draggable items. Each list item includes a `Handler` component with the `handler` class, which corresponds to the `handlerSelector` defined in the script, making only this specific part of the item draggable.

```Vue
<template>

<ul ref="parent" class="number-list">

<li class="number" v-for="(element, index) in list" :index="index">

<Handler class="handler" />

{{ element }}

</li>

</ul>

</template>
```

--------------------------------

### Implement Horizontal Drag-and-Drop List in Vue

Source: https://fluid-dnd.netlify.app/vue/example/horizontal-list/single-horizontal-list

This Vue 3 component demonstrates how to create a horizontal drag-and-drop list using the 'fluid-dnd/vue' composable. It initializes a list of Pokemon, fetches data, and applies drag-and-drop functionality to the parent container, allowing items to be reordered horizontally with a custom dragging class.

```Vue
<script setup lang="ts">

import { ref } from "vue";

import { useDragAndDrop } from "fluid-dnd/vue";

import type { Pokemon } from "./Pokemon";

import PokemonComponent from "./PokemonComponent.vue";

import { fetchPokemons } from "@/server/pokemonServer";

const pokemons = ref([] as Pokemon[]);

pokemons.value = await fetchPokemons(3);

const [ parent ] = useDragAndDrop(pokemons, {

direction: "horizontal",

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 border-4 p-4 max-sm:p-2 flex flex-row overflow-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>

</template>
```

--------------------------------

### Vue Component for Draggable Vertical Pokemon List with Insert

Source: https://fluid-dnd.netlify.app/vue/example/vertical-list/single-vertical-list-with-insert

This Vue 3 component demonstrates how to create a draggable vertical list of Pokemon using the `fluid-dnd/vue` library. It fetches an initial set of Pokemon data and renders them as draggable items, allowing for reordering and insertion within the list. The `useDragAndDrop` composable is used to manage the drag-and-drop functionality, applying a 'dragging-pokemon' class during drag operations.

```Vue
<script setup lang="ts">

import { ref } from "vue";

import { useDragAndDrop } from "fluid-dnd/vue";

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"

>

<PokemonComponent

v-for="(pokemon, index) in pokemons"

:key="pokemon.name"

:index="index"

:pokemon="pokemon"

/>

</div>

</div>

</template>
```

--------------------------------

### Add Index and Key Attributes to List Items for Fluid DnD in Vue

Source: https://fluid-dnd.netlify.app/vue/guides/verticallist

This snippet demonstrates how to add :index and :key attributes to each <li> element within the v-for loop. The index attribute provides the current position, and the key attribute uniquely identifies each element, both essential for Fluid DnD to manage sorting correctly and efficiently update the DOM.

```Vue
<template>

<ul ref="parent" class="number-list">

<li class="number" v-for="(element, index) in list" :index="index" :key="element">

{{ element }}

</li>

</ul>

</template>
```

--------------------------------

### Vue: Configure isDraggable property for list items

Source: https://fluid-dnd.netlify.app/vue/guides/isdraggable

This script demonstrates how to initialize a draggable list using `useDragAndDrop` from `fluid-dnd/vue`. The `isDraggable` option is configured with a callback function that prevents elements containing the 'is-not-draggable' class from being dragged, providing granular control over drag behavior.

```Vue
<script setup lang="ts">

import { ref } from "vue";

import { useDragAndDrop } from "fluid-dnd/vue";

const list = ref([1, 2, 3, 4], {

isDraggable: (el) => !el.classList.contains("is-not-draggable"),

});

const [ parent ] = useDragAndDrop(list);

</script>
```

--------------------------------

### Map Values Between Drag and Drop Lists in Vue

Source: https://fluid-dnd.netlify.app/vue/guides/events/mapvalues

This snippet illustrates how to use the `mapFrom` parameter within `useDragAndDrop` to transform item data when moving between lists. It defines two mapping functions, `MapItemToMinifiedItem` and `MapMinifiedItemToItem`, to convert between different item structures (`Item` and `MinifiedItem`) during drag-and-drop operations, ensuring data consistency.

```Vue
<script setup lang="ts">

...

const MapItemToMinifiedItem = (item:Item) => {
return {
id: item.id,
label: item.value,
}
}

const MapMinifiedItemToItem = (item:MinifiedItem) => {
return {
id: item.id,
value: item.label,
is_visible: true,
}
}

const [ parent1 ] = useDragAndDrop<Item>(list, {
...
mapFrom : (item:Item) => {
return MapItemToMinifiedItem(item)
},
});

const [ parent2 ] = useDragAndDrop<MinifiedItem>(list2, {
...
mapFrom : (item:MinifiedItem) => {
return MapMinifiedItemToItem(item)
},
});

</script>
```

--------------------------------

### Vue Component for Horizontal Drag-and-Drop Pokemon Lists

Source: https://fluid-dnd.netlify.app/vue/example/horizontal-list/group-horizontal-lists

This Vue component, `GroupOfHorizontalListOfPokemons.vue`, demonstrates how to create multiple independent horizontal lists of Pokemon that support drag-and-drop functionality. It uses the `fluid-dnd/vue` library to enable reordering within each list. The component fetches Pokemon data for three different generations and applies the drag-and-drop behavior to each list, all sharing the same `droppableGroup`.

```Vue
<script setup lang="ts">
import { ref } from "vue";
import { useDragAndDrop } from "fluid-dnd/vue";
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 [ parent2 ] = useDragAndDrop(pokemon2G, {
  droppableGroup: "group",
  direction: "horizontal",
  draggingClass: "dragging-pokemon",
});

const [ 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"
```

--------------------------------

### Vue.js Horizontal List with PokemonComponent

Source: https://fluid-dnd.netlify.app/vue/example/horizontal-list/group-horizontal-lists

This Vue template snippet demonstrates a horizontal list implementation using `PokemonComponent` within a scrollable container. It iterates over a `pokemon3G` array, passing `pokemon` data and `index` as props to each component. The container includes Tailwind CSS classes for styling and responsiveness, enabling horizontal scrolling for overflow content.

```Vue
: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>
```

--------------------------------

### Attach Parent Reference for Fluid DnD in Vue Template

Source: https://fluid-dnd.netlify.app/vue/guides/verticallist

This snippet illustrates how to bind the parent reference obtained from useDragAndDrop to the <ul> element in the Vue template. This step is crucial for Fluid DnD to identify the main container for drag-and-drop operations, enabling the library to manage the drag and drop behavior correctly within this element.

```Vue
<template>

<ul ref="parent" class="number-list">

<li class="number" v-for="(element, index) in list">

{{ element }}

</li>

</ul>

</template>
```

--------------------------------

### Vue Component for Draggable Vertical List with Remove

Source: https://fluid-dnd.netlify.app/vue/example/vertical-list/single-vertical-list-with-remove

This Vue component, `SingleVerticalListOfPokemons.vue`, demonstrates how to create a draggable vertical list using the `fluid-dnd/vue` library. It fetches a list of Pokemon, makes them draggable, and allows items to be removed from the list with a specified delay. The `useDragAndDrop` hook is configured with a `draggingClass` and `delayBeforeRemove`.

```Vue
<script setup lang="ts">

import { ref } from "vue";

import { useDragAndDrop } from "fluid-dnd/vue";

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,_, removeEvent ] = useDragAndDrop(pokemons, {

draggingClass: "dragging-pokemon",

delayBeforeRemove: 300,

});

</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"

has-remove

:removeEvent

/>

</div>

</div>

</template>
```

--------------------------------

### Vue Horizontal Drag-and-Drop List with Autoscroll

Source: https://fluid-dnd.netlify.app/vue/example/horizontal-list/single-horizontal-list-autoscroll

This Vue component creates a horizontally scrollable and draggable list of Pokemon. It leverages the `useDragAndDrop` composable from `fluid-dnd/vue` to enable drag-and-drop functionality, configured for horizontal movement and applying a `dragging-pokemon` class during drag operations. The component fetches initial Pokemon data and renders each as a `PokemonComponent` within the draggable container.

```Vue
<script setup lang="ts">

import { ref } from "vue";

import { useDragAndDrop } from "fluid-dnd/vue";

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, {
	direction: "horizontal",
	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 border-4 p-4 max-sm:p-2 flex flex-row overflow-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>
</template>
```

--------------------------------

### Configure Delay Before Element Removal (Vue)

Source: https://fluid-dnd.netlify.app/vue/guides/actions/listremove

Explains how to use the `delayBeforeRemove` option in `useDragAndDrop`. This setting controls the duration in milliseconds that an element remains visible with the `removingClass` applied before it is completely removed from the DOM.

```Vue
<script setup lang="ts">

// ...

const { parent, removeAt } = useDragAndDrop(list,{

removingClass: "removed",

delayBeforeRemove: 800

});});

</script>
```