### Global Setup of Fluid DnD Composables in Vue

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/vue/introduction/introduction.mdx

Demonstrates setting up the 'useDragAndDrop' composable from Fluid DnD globally in a Vue application using Vue's provide/inject mechanism. This allows the composable to be accessed throughout the entire application. It requires Vue to be installed.

```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');
```

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

### Integrate React-specific ESLint Plugins (JavaScript)

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/tests-frameworks/react/README.md

This configuration adds `eslint-plugin-react-x` and `eslint-plugin-react-dom` to your ESLint setup. It enables recommended TypeScript rules from `react-x` and recommended rules from `react-dom`, enhancing React-specific linting. Ensure these plugins are installed as dev dependencies.

```javascript
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})
```

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

### Essential npm Commands for Astro Projects

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/README.md

These commands are essential for managing an Astro project. They cover dependency installation, starting a local development server, building the production site, and previewing the build. These commands are executed from the project's root directory in a terminal.

```bash
npm install
```

```bash
npm run dev
```

```bash
npm run build
```

```bash
npm run preview
```

```bash
npm run astro ...
```

```bash
npm run astro -- --help
```

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

### Start Svelte Development Server with npm

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/tests-frameworks/svelte/README.md

This snippet shows how to start the development server for a Svelte project using npm. It includes an option to automatically open the application in a new browser tab. Assumes project dependencies have been installed via 'npm install' or equivalent.

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

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

### React Composition API Usage Example

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/react/introduction/introduction.mdx

Demonstrates how to import and use the `useDragAndDrop` composable from the 'fluid-dnd/react' package within a React application using TypeScript. This is a fundamental part of integrating Fluid DnD's drag and drop capabilities.

```tsx
import { useDragAndDrop } from 'fluid-dnd/react';
// ...
```

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

### Import useDragAndDrop Composable in Svelte

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/svelte/introduction/introduction.mdx

Demonstrates how to import the `useDragAndDrop` composable function from the 'fluid-dnd/svelte' module in a Svelte component. This is the first step in utilizing Fluid DnD's drag-and-drop functionality within a Svelte application.

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

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

### Install fluid-dnd using npm, yarn, or pnpm

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/README.md

These commands show how to install the fluid-dnd library using different package managers. Ensure you have Node.js and your chosen package manager installed.

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

# with yarn:
yarn add fluid-dnd

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

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

### Create Astro + Starlight Project

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/README.md

This command initializes a new Astro project using the Starlight template. It requires Node.js and npm to be installed. The command will prompt for project details and set up the basic file structure.

```bash
npm create astro@latest -- --template starlight
```

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

### Local Import of Fluid DnD Composables in Vue

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/vue/introduction/introduction.mdx

Shows how to import the 'useDragAndDrop' composable from Fluid DnD for local usage within a Vue component's script section. This is useful when the composable is only needed in a specific part of the application.

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

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

### Expand ESLint with Type-Checked Rules (TypeScript)

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/tests-frameworks/react/README.md

This snippet shows how to configure ESLint to include type-aware lint rules for TypeScript projects. It extends the default ESLint configuration with recommended, strict, and stylistic type-checked rules. Ensure that `tsconfig.node.json` and `tsconfig.app.json` are correctly configured.

```javascript
export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})
```

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

### Build Svelte Project for Production with npm

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/tests-frameworks/svelte/README.md

This snippet outlines the command to generate a production-ready build of a Svelte application using npm. The resulting build is typically placed in a 'dist' or 'build' folder. Further deployment may require installing a Svelte adapter.

```bash
npm run build
```

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

### TechArticle Schema (JSON-LD)

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/STRUCTURED_DATA.md

Implements the 'TechArticle' schema for guide pages, including headline, description, author, and related topics. This schema helps search engines categorize technical content effectively.

```json
{
  "@type": "TechArticle",
  "headline": "Page Title",
  "description": "Page description",
  "author": {
    "@type": "Person",
    "name": "Carlos Jorge"
  },
  "about": [
    {"@type": "Thing", "name": "Drag and Drop"},
    {"@type": "Thing", "name": "Vue.js"},
    {"@type": "Thing", "name": "React"},
    {"@type": "Thing", "name": "Svelte"}
  ]
}
```

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

### Vue Drag and Drop Setup for a List

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/svelte/guides/verticallist.mdx

This snippet shows the basic setup for using the `useDragAndDrop` hook from `fluid-dnd/vue` to manage a list of numbers. It initializes a reactive list and applies the drag-and-drop functionality to it. Ensure you have Vue 3 and `fluid-dnd` installed.

```vue
<script setup lang="ts">
import { useDragAndDrop } from "fluid-dnd/vue";

const list = $state([1, 2, 3]);
const [ parent ] = useDragAndDrop(list);

</script>
```

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

### Setup List for Horizontal Drag and Drop (Vue)

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/vue/guides/horizontallist.mdx

This snippet shows the setup for a horizontal list using Fluid DnD in Vue.js. It initializes a list of numbers and configures the drag-and-drop instance with the 'horizontal' direction. It requires Vue.js and the useDragAndDrop composable from Fluid DnD.

```vue
import { ref } from "vue";
import { useDragAndDrop } from "@/composables/useDragAndDrop";

const list = ref([1, 2, 3, 4, 5]);
const [ parent ] = useDragAndDrop(list, { direction: "horizontal" });
```

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

### Initialize Editable List with Fluid DnD in React

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/es/react/guides/listinputs.mdx

This snippet initializes a list of people using the `useDragAndDrop` hook from Fluid DnD. It sets up the initial state for each person object, including properties for identification and editability. This forms the basis for an editable list where users can reorder items.

```tsx
import {SingleVerticalPersonList} from "@/components/react/SingleVerticalPersonList.tsx";
import { Code } from "@astrojs/starlight/components";

export const listOfPeople = `
export const SingleVerticalPersonList: React.FC = () => {
    const [ parent, listValue, setList ] = useDragAndDrop<Person, HTMLUListElement>([
        { number: 1, name: "Carlos", edit: false },
        { number: 2, name: "Jorge", edit: false },
        { number: 3, name: "Ivis", edit: false },
    ]);
`;

<Code code={listOfPeople} lang="tsx" />
```

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

### Vue: Setup Horizontal List with Fluid DnD

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/es/vue/guides/horizontallist.mdx

This snippet demonstrates the initial setup for a horizontal list using Fluid DnD in Vue. It imports necessary components and defines a reactive list of numbers. The `useDragAndDrop` hook is configured with `direction: 'horizontal'` to enable horizontal dragging behavior. No external dependencies are required beyond Vue and Fluid DnD.

```vue
<script setup lang="ts">
  import { ref } from 'vue';
  import { useDragAndDrop } from '@formkit/drag-and-drop';

  const list = ref([1, 2, 3, 4, 5]);
  const [ parent ] = useDragAndDrop(list, { direction: "horizontal" });
</script>
```

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

### Configure Lists for Multiple Groups (Svelte)

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/svelte/guides/listgroup.mdx

This example demonstrates how a list can belong to multiple droppable groups ('group1' and 'group2'). Drag and drop is only possible between lists that share at least one common group. This snippet modifies the previous example to include 'group2' for `list2`.

```svelte
<script lang="ts">
... // Other imports and setup
import { useDragAndDrop } from "@/lib/dnd"; // Assuming this is the import path

const list1 = $state([1, 2, 3, 4]);
const [ parent1 ] = useDragAndDrop(list1, {
  droppableGroup: "group1",
});

const list2 = $state([5, 6, 7, 8]);
const [ parent2 ] = useDragAndDrop(list2, {
  droppableGroup: "group1 group2", // Now belongs to two groups
  direction: "horizontal",
});
...
</script>
```

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

### Vue.js: List with Drag Handler Setup

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/vue/guides/styles/listhandler.mdx

Sets up a Vue.js component to use Fluid DnD with a specified drag handler selector. It imports necessary functions from 'fluid-dnd/vue' and defines the list data and handler selector. The `useDragAndDrop` hook is utilized to enable drag-and-drop functionality.

```vue
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 });

```

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

### Vue Template for Displaying Vertical List Items

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/vue/guides/verticallist.mdx

This HTML template displays items from a Vue list within an unordered list (`<ul>`). It uses `v-for` to iterate over the `list` data, rendering each element as a list item (`<li>`). Basic CSS is provided to style the list and its items. This template is intended to be used in conjunction with a script setup that provides the `list` data.

```vue
<template>
  <ul class="number-list">
    <li class="number" v-for="(element, index) in list">
      {{ element }}
    </li>
  </ul>
</template>
<style>
  .number {
    border-style: solid;
    padding-left: 5px;
    margin-top: 0.25rem;
    border-width: 2px;
  }
  .number-list {
    display: block;
    padding: 10px;
  }
</style>
```

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

### Svelte List View with Insert Button

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/svelte/guides/actions/listinsert.mdx

This snippet defines the Svelte component's view for a list that supports insertion. It renders an unordered list (`ul`) with items bound to the `list` state. An 'add' button is provided, which calls the `insertAt` function to append a new element to the end of the list.

```svelte
<ul use:parent class="number-list">
  {#each list as element, index (element) }
    <li class="number" data-index={index}>
      { element }
    </li>
  {/each}
</ul>
<button class="insert-button" onclick={insertAt(list.length, list.length)}>+</button>

```

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

### Vue Script Setup for Fluid DnD Vertical List

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/vue/guides/verticallist.mdx

This snippet sets up a Vue component to use Fluid DnD for a single vertical list. It imports necessary functions from Vue and fluid-dnd, defines a reactive list of numbers, and initializes the drag-and-drop functionality by passing the list to the `useDragAndDrop` hook. The hook returns a `parent` reference used to attach to the DOM element representing the list 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>
```

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

### Basic List Insertion with useDragAndDrop in Svelte

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/svelte/guides/actions/listinsert.mdx

This snippet shows how to initialize Fluid DnD for list insertion in Svelte using the `useDragAndDrop` hook. It extracts the `insertAt` function to manage list manipulation. The `list` is a reactive state variable, and the `parent` is a directive to attach to the list element.

```svelte
<script lang="ts">
import { useDragAndDrop } from "fluid-dnd/vue";

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

</script>
```

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

### Initialize Sortable List with Editable Data using Fluid DnD

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/react/guides/listinputs.mdx

Initializes a sortable list of people using Fluid DnD's `useDragAndDrop` hook. The list items contain properties for name and an edit status. This setup is the foundation for creating editable and reorderable lists.

```tsx
import { SingleVerticalPersonList } from "@/components/react/SingleVerticalPersonList.tsx";
import { Code } from "@astrojs/starlight/components";

export const listOfPeople = `
export const SingleVerticalPersonList: React.FC = () => {
    const [ parent, listValue, setList ] = useDragAndDrop<Person, HTMLUListElement>([
        { number: 1, name: "Carlos", edit: false },
        { number: 2, name: "Jorge", edit: false },
        { number: 3, name: "Ivis", edit: false },
    ]);
`;
```

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

### Implement onDragOver for Real-time Feedback (Svelte)

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/svelte/guides/events/ondrag.mdx

This snippet shows how to implement the `onDragOver` event in Fluid DnD using Svelte. It provides real-time feedback by updating a message that indicates which element is being dragged over which droppable area and at what position. It utilizes the `DragOverEventData` object for event details.

```svelte
<script lang="ts">
import { useDragAndDrop } from "fluid-dnd";
import { type DragOverEventData } from "fluid-dnd";

let currentDragOver = $state<string>('')
const list = [1, 2, 3, 4, 5];

function onDragOver(data: DragOverEventData<number>){
  const droppableElement = data.droppable as HTMLElement
  const droppableId = droppableElement.id || 'Unknown'
  currentDragOver = `Dragging ${data.value} over ${droppableId} at position ${data.targetIndex}`
}

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

const list2 = $state([5, 6, 7, 8]);
const [ parent2 ] = useDragAndDrop(list2, {
  droppableGroup: "group1",
  direction: "horizontal",
  onDragOver,
});
</script>
```

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

### React Component with Dragging Styles

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/react/guides/styles/draggingclass.mdx

This React component demonstrates how to use Fluid DnD's `useDragAndDrop` hook to enable dragging functionality with custom styles. It initializes the drag-and-drop behavior with a 'dragging' class to visually indicate items being dragged. The component expects an array of numbers as input and renders them as a list.

```tsx
import { ListWithDraggingStyles } from "@/components/react/ListWithDraggingStyles.tsx";
import { Code } from "@astrojs/starlight/components";
import { useDragAndDrop } from "some-drag-and-drop-library"; // Assuming this is the library

export const ListWithDraggingStyles: React.FC = () => {
    const [ parent, listValue ] = useDragAndDrop<number, HTMLUListElement>([1, 2, 3],{
      draggingClass: "dragging",
    });

    return (
        <ul ref={parent} className="number-list p-8 bg-[var(--sl-color-gray-6)]">
            {listValue.map((element, index) => (
                <li className="number" data-index={index} key={element}>
                    {element}
                </li>
            ))}
        </ul>
    )
};

```

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

### Astro Project Structure Overview

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/README.md

This illustrates the typical file and folder structure of an Astro project using Starlight. Key directories include `public/` for static assets, `src/content/docs/` for documentation files, and configuration files like `astro.config.mjs` and `package.json`.

```text
.\n├── public/\n├── src/\n│   ├── assets/\n│   ├── content/\n│   │   ├── docs/\n│   │   └── config.ts\n│   └── env.d.ts\n├── astro.config.mjs\n├── package.json\n└── tsconfig.json
```

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

### Vue: Rendering Draggable Lists for Fluid DnD

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/vue/guides/listgroup.mdx

This snippet shows the Vue template code for rendering two lists that are configured for drag and drop using Fluid DnD. It iterates over the list data to display items and assigns template refs to the elements that will act as drag-and-drop containers (`parent1` and `parent2`). Basic styling classes are also applied.

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

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

### Snap to Grid While Dragging with Fluid DnD

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/svelte/guides/events/mapcoordinates.mdx

This code snippet illustrates how to snap dragged elements to a grid using Fluid DnD's `coordinateTransform` option. The `gridTranslate` function calculates the nearest grid point based on a defined `gridSize`. Multiple mappers can be chained, applying transformations sequentially. This example builds upon the `lockAxis` functionality, showing how to combine different coordinate mapping strategies. It assumes a Vue environment and `fluid-dnd` integration.

```vue
<script 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>
```

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

### Create Svelte Project with sv CLI

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/tests-frameworks/svelte/README.md

This snippet demonstrates how to create a new Svelte project using the 'sv create' command. It can create a project in the current directory or a specified subdirectory. No external dependencies are required beyond Node.js and npm/pnpm/yarn.

```bash
npx sv create

npx sv create my-app
```

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

### Vue.js: Implement isDraggable for Conditional Dragging

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/vue/guides/isdraggable.mdx

This snippet demonstrates how to use the `isDraggable` property within the `useDragAndDrop` hook in Vue.js. The `isDraggable` function receives the element and returns a boolean to determine if it can be dragged. In this example, elements with the class 'is-not-draggable' are prevented from being dragged.

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

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

### Conditionally Enable Dragging with isDraggable (React)

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/es/react/guides/isdraggable.mdx

This snippet shows how to use the `isDraggable` property in Fluid DnD to control which elements can be dragged. The `isDraggable` function receives the element as an argument and should return a boolean. In this example, elements with the class 'is-not-draggable' are prevented from being dragged.

```tsx
export const SingleListWithIsDraggable: React.FC = () => {
    const [ parent, listValue ] = useDragAndDrop<number, HTMLUListElement>([1, 2, 3, 4],{
      isDraggable: (el) => !el.classList.contains("is-not-draggable"),
    });
    // ...
};
```

```tsx
return (
        <ul ref={parent} className="number-list">
            {listValue.map((element, index) => (
                <li className={`number ${element % 2 == 0 ? 'is-not-draggable' : ''}`} data-index={index} key={element}>
                    {element}
                </li>
            ))}
        </ul>
    )
};
```

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

### Crear Vista de Listas Arrastrables en Svelte

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/es/svelte/guides/listgroup.mdx

Este código define la estructura HTML y Svelte para mostrar dos listas interactivas. Se utilizan directivas `ref` para asociar los elementos del DOM con los `parent` obtenidos del hook `useDragAndDrop`. El marcado `{#each}` itera sobre los datos de las listas para renderizar los elementos `<li>` correspondientes.

```svelte
<div class="group-list">
  <ul ref="parent1" class="number-list">
    {#each list as  element, index (element)}
      <li class="number" data-index={index}>
        { element }
      </li>
    {/each}
  </ul>
  <div ref="parent2" class="number-list-h">
    {#each list2 as  element, index (element)}
      <li class="number" data-index={index}>
        { element }
      </li>
    {/each}
  </div>
</div>
<style>
 ...
</style>

```

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

### Implement List Item Removal with Fluid DnD in Svelte

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/es/svelte/guides/actions/listremove.mdx

This snippet shows the basic setup for removing items from a list using Fluid DnD in Svelte. It initializes a list state and uses the `useDragAndDrop` hook to get a `removeAt` function for item removal.

```svelte
import { useDragAndDrop } from "fluid-dnd/svelte";

const list = $state([1, 2, 3, 4, 5]);
const [ parent, _, removeAt ] = useDragAndDrop(list);
```

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

### FAQPage Schema (JSON-LD)

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/STRUCTURED_DATA.md

Implements the 'FAQPage' schema for frequently asked questions. This schema allows search engines to display questions and answers directly in search results, improving visibility.

```json
{
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is Fluid DnD?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Fluid DnD is a fluid, agnostic and versatile drag and drop library..."
      }
    }
  ]
}
```

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

### Access Drag Event Parameters (Vue.js)

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/svelte/guides/events/ondrag.mdx

This example demonstrates how to access detailed information within `onDragStart` and `onDragEnd` events using Vue.js. It captures the `value` of the dragged element and the last dropped element, utilizing types like `DragStartEventData` and `DragEndEventData` for type safety.

```vue
<script lang="ts">
import { type DragEndEventData, type DragStartEventData } from "fluid-dnd";

let draggedElement = $state<number | null>()
let lastDroppedElement = $state<number | null>()

function onDragStart(data: DragStartEventData<number>){
  draggedElement = data.value;
  //...
}

function onDragEnd (data: DragEndEventData<number>){
  lastDroppedElement = data.value;
  //...
}
//...
</script>
```

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

### Configurar lista horizontal con Fluid DnD en Svelte

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/es/svelte/guides/horizontallist.mdx

Este fragmento de código Svelte muestra cómo inicializar una lista de números y configurar Fluid DnD para que sea direccional y horizontal. Utiliza el hook `useDragAndDrop` y define el estado de la lista.

```svelte
<script lang="ts">
    const list = $state([1, 2, 3, 4, 5]);
    const [ parent ] = useDragAndDrop(list, { direction: "horizontal" });
</script>
```

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

### Svelte Template for Displaying Drag Over Information

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/svelte/guides/events/ondrag.mdx

A Svelte template that displays the current drag-over information, such as the `currentDragOver` value, and renders two droppable lists. It uses Svelte's templating syntax for conditional rendering and iteration. The `bind:this` directive is used to get a reference to the droppable element.

```svelte
<div class="my-6">
  <h4>Current drag over: <span class="!text-[var(--sl-color-white)]">{currentDragOver || 'None'}</span></h4>
</div>

<div bind:this={droppableGroup} class="group-list bg-[var(--sl-color-gray-6)]">
  <h5 class="mb-2">List 1</h5>
  <ul use:parent1 id="list1" class="number-list">
    {#each list as element, index (element) }
      <li class="number" data-index={index}>
        { element }
      </li>
    {/each}
  </ul>
  <h5 class="mb-2">List 2</h5>
  <div use:parent2 id="list2" class="number-list-h">
    {#each list2 as element, index (element) }
      <div
        class="number"
        data-index={index}
      >
        { element }
      </div>
    {/each}
  </div>
</div>
```

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

### Implementar onDragStart y onDragEnd en Svelte

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/es/svelte/guides/events/ondrag.mdx

Este snippet muestra cómo usar los eventos onDragStart y onDragEnd en Svelte con Fluid DnD. Estos eventos alternan la clase 'marked-droppable' en los elementos designados como 'droppable'. Requiere la librería fluid-dnd y Svelte.

```svelte
<script lang="ts">
import { useDragAndDrop } from "fluid-dnd";

let droppableGroup = $state<HTMLElement>(null)
function onDragStart(){
  const droppables = droppableGroup?.querySelectorAll('.droppable-group-group1')??[]
  for (const droppable of [...droppables]) {
    droppable.classList.toggle('marked-droppable',true)
  }
}
function onDragEnd (){
  const droppables = droppableGroup?.querySelectorAll('.droppable-group-group1')??[]
  for (const droppable of [...droppables]) {
    droppable.classList.toggle('marked-droppable',false)
  }
}
const list = $state([1, 2, 3, 4, 5]);
const [ parent1 ] = useDragAndDrop<number>(list, {
  droppableGroup: "group1",
  onDragStart,
  onDragEnd,
});

const list2 = $state([6, 7, 8, 9, 10]);
const [ parent2 ] = useDragAndDrop(list2, { 
  droppableGroup: "group1",
  direction: "horizontal",
  onDragStart,
  onDragEnd,
});
</script>
```

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

### Implement onDragStart and onDragEnd for List Manipulation (Svelte)

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/svelte/guides/events/ondrag.mdx

This snippet demonstrates how to use `onDragStart` and `onDragEnd` events in Fluid DnD with Svelte. It toggles a CSS class on droppable elements when dragging starts and removes it when dragging ends, providing visual feedback. It requires the `useDragAndDrop` hook and a `droppableGroup` reference.

```svelte
<script lang="ts">
import { useDragAndDrop } from "fluid-dnd";

let droppableGroup = $state<HTMLElement>(null)

function onDragStart(){
  const droppables = droppableGroup?.querySelectorAll('.droppable-group-group1')??[]
  for (const droppable of [...droppables]) {
    droppable.classList.toggle('marked-droppable',true)
  }
}

function onDragEnd (){
  const droppables = droppableGroup?.querySelectorAll('.droppable-group-group1')??[]
  for (const droppable of [...droppables]) {
    droppable.classList.toggle('marked-droppable',false)
  }
}

const list = [1, 2, 3, 4, 5];
const [ parent1 ] = useDragAndDrop<number>(list, {
  droppableGroup: "group1",
  onDragStart,
  onDragEnd,
});

const list2 = $state([6, 7, 8, 9, 10]);
const [ parent2 ] = useDragAndDrop(list2, { 
  droppableGroup: "group1",
  direction: "horizontal",
  onDragStart,
  onDragEnd,
});
</script>
```

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

### Lock Axis While Dragging with Fluid DnD

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/svelte/guides/events/mapcoordinates.mdx

This code demonstrates how to lock the horizontal axis during drag operations using Fluid DnD's `coordinateTransform` option. It defines a `lockAxis` function that sets the x-coordinate to 0 while preserving the y-coordinate. This is useful for restricting movement to a single dimension. The example assumes a Vue setup with `fluid-dnd` and `ref` for managing lists.

```vue
<script lang="ts">
	import { type Coordinate } from "fluid-dnd";

	const list = ref([...Array(20).keys()]);
	const lockAxis = (coordinate: Coordinate) => {
		return {
			x: 0,
			y: coordinate.y
		};
	};
  const [ parent ] = useDragAndDrop(list, {
		coordinateTransform: [ lockAxis ]
  });
</script>
```

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

### Configurar Drag Handler en Lista con Vue y Fluid DnD

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/es/vue/guides/styles/listhandler.mdx

Este snippet muestra cómo configurar el script para usar Fluid DnD con un drag handler en una lista de Vue. Se importa `useDragAndDrop`, se define la lista de datos, se especifica el `handlerSelector`, y se inicializa el hook. La dependencia principal es 'fluid-dnd/vue'.

```vue
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 });
```

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

### Configure Lists for Multiple Drop Groups in TSX

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/react/guides/listgroup.mdx

This TSX code snippet illustrates how to configure a list to belong to multiple droppable groups ('group1' and 'group2'). This allows for more complex drag-and-drop interactions where an item can be dropped into lists associated with either group. The example modifies the `droppableGroup` option to include multiple group names, enabling directional drop behavior.

```tsx
// ...
export const ListGroup: React.FC<Props> = () => {
    const [ parent, listValue ] = useDragAndDrop<number, HTMLUListElement>([1, 2, 3, 4, 5],{
        droppableGroup: 'group1',
    });
    const [ parent2, listValue2 ] = useDragAndDrop<number, HTMLDivElement>([6, 7, 8, 9, 10],{
        droppableGroup: 'group1 group2',
        direction: "horizontal",
    });

```

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

### Renderizar lista horizontal con Fluid DnD en Svelte

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/es/svelte/guides/horizontallist.mdx

Este fragmento de código Svelte define la vista de una lista horizontal utilizando Fluid DnD. Incluye la directiva `use:parent` para habilitar la funcionalidad de arrastrar y soltar, y un bucle `#each` para renderizar cada elemento de la lista con estilos específicos.

```svelte
<div use:parent class="number-list">
  {#each list as element, index (element)} 
    <div class="number" data-index = {index}> 
      { element } 
    </div>
  {#/each}
</div>

<style>
/* ... */
.number-list {
  display: flex;
  flex-direction: row;
}
</style>

```

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

### Crear Vista y Estilos CSS para Arrastre en Svelte

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/es/svelte/guides/styles/draggingclass.mdx

Este snippet define la estructura HTML de una lista en Svelte y los estilos CSS necesarios para la clase `dragging`, que se aplica a los elementos mientras se arrastran. Incluye un bucle `{#each}` para renderizar la lista y un selector CSS para `.dragging`.

```svelte
<ul use:parent class="number-list">   
  {#each list as element, index (element) } 
      <li class="number" data-index = {index}> 
          { element } 
      </li>
  {/each}
</ul>

<style>
/*....*/
.dragging {
  transition: background-color color 150ms ease-in, color 150ms ease-in;
  background-color: var(--sl-color-gray-1);
  color: black;
}
</style>

```

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

### Configurar lista de números scrollable con Fluid DnD (Svelte)

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/es/svelte/guides/verticallistautoscroll.mdx

Este snippet muestra cómo inicializar una lista de números y aplicar la funcionalidad de drag and drop de Fluid DnD. Requiere la importación de `useDragAndDrop`. La lista se declara como un estado reactivo.

```svelte
import { useDragAndDrop } from "@/lib/dnd";

const list = $state([...Array(20).keys()]);
const [ parent ] = useDragAndDrop(list);
```

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

### WebSite Schema (JSON-LD)

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/STRUCTURED_DATA.md

Defines the 'WebSite' schema, including the site's name and a search action configuration. This helps search engines understand the website's overall purpose and search capabilities.

```json
{
  "@type": "WebSite",
  "name": "Fluid DnD Documentation",
  "potentialAction": {
    "@type": "SearchAction",
    "target": {
      "@type": "EntryPoint",
      "urlTemplate": "https://fluid-dnd.netlify.app/search?q={search_term_string}"
    }
  }
}
```

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

### SoftwareApplication Schema (JSON-LD)

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/STRUCTURED_DATA.md

Defines the 'SoftwareApplication' schema for Fluid DnD, specifying its name, category, operating system, version, and download URL. This is crucial for applications listed in search results.

```json
{
  "@type": "SoftwareApplication",
  "name": "Fluid DnD",
  "applicationCategory": "DeveloperApplication",
  "operatingSystem": "Web Browser",
  "softwareVersion": "2.6.0",
  "downloadUrl": "https://www.npmjs.com/package/fluid-dnd"
}
```

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

### Configurar Listas con Múltiples Grupos para Drag and Drop en Svelte

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/es/svelte/guides/listgroup.mdx

Este snippet Svelte extiende la configuración de arrastrar y soltar para incluir múltiples grupos. La lista `list2` ahora pertenece a dos grupos ('group1' y 'group2'), lo que permite que los elementos de `list1` (solo en 'group1') se arrastren a `list2`, pero no viceversa, demostrando el control de la dirección de arrastre entre grupos.

```svelte
<script lang="ts">
...
const list1 = $state([1, 2, 3, 4]);
const [ parent1 ] = useDragAndDrop(list1, {
  droppableGroup: "group1",
});
...
const list2 = $state([5, 6, 7, 8]);
const [ parent2 ] = useDragAndDrop(list2, {
  droppableGroup: "group1 group2",
  direction: "horizontal",
});
</script>
```

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

### Vue.js: Template for Displaying Drag Over Information

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/vue/guides/events/ondrag.mdx

This snippet shows a Vue.js template that displays the current drag over information. It binds to the `currentDragOver` reactive variable, which is updated by the `onDragOver` event handler, and includes lists for drag-and-drop interaction.

```vue
<template>
  <div class="my-6">
    <h4>Current drag over: <span class="!text-[var(--sl-color-white)]">{{ currentDragOver || 'None' }}</span></h4>
  </div>
  <div ref="droppableGroup" class="group-list bg-[var(--sl-color-gray-6)]">
    <h5 class="mb-2">List 1</h5>
    <ul ref="parent1" id="list1" class="number-list">
      <li class="number" v-for="(element, index) in list1" :index :key="element">
        {{ element }}
      </li>
    </ul>
    <h5 class="mb-2">List 2</h5>
    <div ref="parent2" id="list2" class="number-list-h">
      <div
        class="number"
        v-for="(element, index) in list2"
        :index
        :key="element"
      >
        {{ element }}
      </div>
    </div>
  </div>
</template>
```

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

### Configurar Estilos de Arrastre en Svelte con Fluid DnD

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/es/svelte/guides/styles/draggingclass.mdx

Este snippet muestra cómo configurar Fluid DnD en Svelte para añadir una clase de estilo a los elementos mientras se arrastran. Se utiliza la opción `draggingClass` para especificar la clase CSS a aplicar.

```svelte
<script lang="ts">
import { useDragAndDrop } from "fluid-dnd/svelte";

const list = $state([1, 2, 3]);
const [ parent ] = useDragAndDrop(list,{
  draggingClass: "dragging",
});

</script>
```

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

### Bind droppableGroup reference in Svelte View

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/svelte/guides/events/ondrag.mdx

This snippet shows how to bind the `droppableGroup` reference in the Svelte view. This reference is crucial for the `onDragStart` and `onDragEnd` functions to correctly identify and manipulate droppable elements within the specified group.

```svelte
<div bind:this={droppableGroup}  class="group-list">
  <ul use:parent1 class="number-list">
      <!-- ... -->
  </ul>
  <div use:parent2 class="number-list-h">
      <!-- ... -->
  </div>
</div>
```

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

### Crear Vista de Lista Arrastrable con Handler en Vue

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/es/vue/guides/styles/listhandler.mdx

Este snippet detalla la creación de la plantilla (template) para una lista arrastrable en Vue, utilizando Fluid DnD. Define la estructura `<ul>` y `<li>`, e incorpora un componente `Handler` con la clase 'handler', que actúa como el punto de arrastre. La salida es una lista interactiva.

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

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

### Fluid DnD: Renderizado de listas arrastrables

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/es/react/guides/listgroup.mdx

Renderiza las listas configuradas para la funcionalidad de arrastrar y soltar en la vista. Utiliza elementos `<ul>` y `<div>` para mostrar los elementos de la lista, aplicando clases CSS para el estilo. Las dependencias incluyen las referencias `parent` y `parent2`.

```tsx
export const listOfNumbersDraggable = `
    return (
        <div className="group-list bg-[var(--sl-color-gray-6)]">
            <ul ref={parent} className="number-list">
                {listValue.map((element, index) => (
                    <li className="number" data-index={index} key={element}>
                        {element}
                    </li>
                ))}
            </ul>
            <div ref={parent2} className="number-list-h">
                {listValue2.map((element, index) => (
                    <div className="number" data-index={index} key={element}>
                        {element}
                    </div>
                ))}
            </div>
        </div>
    )
};
`;

export const highlightsDraggable = ["parent1", "parent2"];
```

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

### Svelte/Vue: Styling Removed Elements with CSS Transitions

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/svelte/guides/actions/listremove.mdx

Provides CSS example for styling removed elements by targeting the 'removed' class, applying transitions for a smooth visual effect. This works in conjunction with Fluid DnD's `removingClass` option.

```vue
<style scoped>
.number{
  /*
      ... 
  */
  opacity: 1;
  transition: opacity 200ms ease;
}
.number.removed{
  opacity: 0;
}
</style>

```

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

### Vue List Insertion with Inserting Class

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/svelte/guides/actions/listinsert.mdx

This Vue snippet configures Fluid DnD to apply a specific CSS class during the insertion process. The `insertingFromClass` option is set to 'inserting', allowing for visual feedback or animations when an element is being inserted into the list.

```vue
<script setup lang="ts">
// ...
const [ parent, removeAt ] = useDragAndDrop(list,{
  insertingFromClass: "inserting"
});

</script>
```

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

### Fluid DnD: Configuración de listas en múltiples grupos

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/es/react/guides/listgroup.mdx

Habilita una lista para pertenecer a múltiples grupos arrastrables asignando múltiples nombres de grupo al parámetro `droppableGroup`. Esto permite que los elementos se arrastren hacia o desde esta lista solo si los grupos coinciden. Las dependencias incluyen la importación de `ListGroup` y `Code`.

```tsx
import { ListGroup } from "@/components/react/ListGroup.tsx";
import { Code } from "@astrojs/starlight/components";

export const highlightsListOfNumbersGroups = ["group2"];

export const listOfNumbersGroups = `// ...
export const ListGroup: React.FC<Props> = () => {
    const [ parent, listValue ] = useDragAndDrop<number, HTMLUListElement>([1, 2, 3, 4, 5],{
        droppableGroup: 'group1',
    });
    const [ parent2, listValue2 ] = useDragAndDrop<number, HTMLDivElement>([6, 7, 8, 9, 10],{
        droppableGroup: 'group1 group2',
        direction: "horizontal",
    });
`;
```

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

### Configurar Lista con Handler en Vue (Fluid DnD)

Source: https://github.com/carlosjorger/fluid-dnd/blob/main/docs/src/content/docs/es/svelte/guides/styles/listhandler.mdx

Configura una lista en Vue.js para usar Fluid DnD con un manejador de arrastre. Define la lista de datos, el selector para el manejador de arrastre y aplica la hook useDragAndDrop. Requiere la instalación de 'fluid-dnd/vue' y un componente 'Handler'.

```vue
<script setup lang="ts">
import { useDragAndDrop } from "fluid-dnd/vue";
import Handler from "./icons/handler.vue";

const list = $state([1, 2, 3, 4, 5]);
const handlerSelector = ".handler";
const [ parent ] = useDragAndDrop(list, { handlerSelector });

</script>
```