### Swap Start Event Object Example

Source: https://swapy.tahazsh.com/docs/swap-start-event

The event object for `swapStart` provides details about the current state, including `slotItemMap` (available as object, array, or map), the `fromSlot`, and the `draggingItem`. This example demonstrates logging these properties.

```javascript
swapy.onSwapStart((event) => {
  console.log(event.slotItemMap.asObject)
  // {
  //   'foo': 'a',
  //   'bar': 'b',
  //   'baz': 'c'
  // }

  console.log(event.slotItemMap.asArray)
  // [
  //   { slot: 'foo', item: 'a' },
  //   { slot: 'bar', item: 'b' },
  //   { slot: 'baz', item: 'c' }
  // ]

  console.log(event.slotItemMap.asMap)
  // Map(3) {
  // 'foo' => 'a',
  // 'bar' => 'b',
  // 'baz' => 'c'
  // }

  console.log(event.fromSlot)
  // 'foo'

  console.log(event.draggingItem)
  // 'a'
})
```

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

### Listen to Swap Start Event

Source: https://swapy.tahazsh.com/docs/swap-start-event

Use `swapy.onSwapStart()` to listen for the event that fires when a user begins dragging an item. This event is triggered once per swapping session.

```javascript
swapy.onSwapStart((event) => {
  console.log(event)
})
```

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

### Install Swapy via package manager

Source: https://swapy.tahazsh.com/docs/installation

Use a package manager to add Swapy as a dependency to your project.

```bash
pnpm install swapy
```

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

### Example HTML Structure for Swapy

Source: https://swapy.tahazsh.com/docs/simple-example

This HTML demonstrates the structure for slots and items within a container, showing how items are nested inside their corresponding slots.

```html
<div class="container">
  <!-- Slot A -->
  <div data-swapy-slot="a">
    <!-- Item A -->
    <div data-swapy-item="a">
      <div>A</div>
    </div>
  </div>

  <!-- Slot B -->
  <div data-swapy-slot="b">
    <!-- Item B -->
    <div data-swapy-item="b">
      <div>B</div>
    </div>
  </div>

  <!-- Slot C -->
  <div data-swapy-slot="c">
    <!-- Item C -->
    <div data-swapy-item="c">
      <div>C</div>
    </div>
  </div>
</div>
```

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

### Create Swapy with Dynamic Animation

Source: https://swapy.tahazsh.com/docs/animation

Use 'dynamic' animation for the default Swapy behavior. No special setup is required.

```javascript
createSwapy(container, {
  animation: 'dynamic'
})
```

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

### Get SlotItemMap as Object, Array, and Map

Source: https://swapy.tahazsh.com/docs/slot-item-map

Use the `swapy.slotItemMap()` method to get the current slot-to-item mapping. The result can be accessed as an object, an array of slot-item pairs, or a Map.

```javascript
const currentSlotItemMap = swapy.slotItemMap()

console.log(currentSlotItemMap.asObject)
// {
//   'foo': 'a',
//   'bar': 'b',
//   'baz': 'c'
// }

console.log(currentSlotItemMap.asArray)
// [
//   { slot: 'foo', item: 'a' },
//   { slot: 'bar', item: 'b' },
//   { slot: 'baz', item: 'c' }
// ]

console.log(currentSlotItemMap.asMap)
// Map(3) {
// 'foo' => 'a',
// 'bar' => 'b',
// 'baz' => 'c'
// }
```

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

### Include Swapy via CDN

Source: https://swapy.tahazsh.com/docs/installation

Load the library from a CDN and initialize it using the Swapy global object.

```html
<script src="https://unpkg.com/swapy/dist/swapy.min.js"></script>
<script>
  // You can then use it like this
  const swapy = Swapy.createSwapy(container)
</script>
```

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

### Initialize Swapy Instance

Source: https://swapy.tahazsh.com/docs/simple-example

Create a new Swapy instance by selecting a container element and passing it to `createSwapy`. Configuration options can be provided.

```javascript
import { createSwapy } from 'swapy'

const container = document.querySelector('.container')
const swapy = createSwapy(container, {
  // Your config options
})
```

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

### Initialize Swapy in Svelte

Source: https://swapy.tahazsh.com/docs/framework-svelte

Uses onMount to initialize the Swapy instance after the DOM is ready and onDestroy to clean up the instance when the component is removed.

```svelte
<script>
  import { createSwapy } from 'swapy'
  import { onDestroy, onMount } from 'svelte'

  let container
  let swapy = null

  onMount(() => {
    // If container element is loaded
    if (container) {
      swapy = createSwapy(container)

      // Your event listeners
      swapy.onSwap(event => {
        console.log('swap', event)
      })
    }
  })

  onDestroy(() => {
    // Destroy the swapy instance on component destroy
    swapy?.destroy()
  })
</script>

<div bind:this={container}>

  <div data-swapy-slot="a">
    <div data-swapy-item="a">
      <div>A</div>
    </div>
  </div>

  <div data-swapy-slot="b">
    <div data-swapy-item="b">
      <div>B</div>
    </div>
  </div>

</div>
```

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

### Initialize and Configure Swapy

Source: https://swapy.tahazsh.com/

Initialize Swapy on a container element with optional animation settings.

```javascript
import { createSwapy } from 'swapy'

const container = document.querySelector('.container')

const swapy = createSwapy(container, {
  animation: 'dynamic' // or spring or none
})

// You can disable and enable it anytime you want
swapy.enable(true)
```

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

### Initialize Swapy in Vue

Source: https://swapy.tahazsh.com/docs/framework-vue

Use onMounted to create the Swapy instance after the DOM is ready and onUnmounted to destroy it when the component is removed.

```vue
<script setup>
import { createSwapy } from 'swapy'
import { onMounted, onUnmounted, ref } from 'vue';

const swapy = ref(null)
const container = ref()

onMounted(() => {
  // If container element is loaded
  if (container.value) {
    swapy.value = createSwapy(container.value)

    // Your event listeners
    swapy.value.onSwap(event => {
      console.log('swap', event)
    })
  }
})

onUnmounted(() => {
  // Destroy the swapy instance on component destroy
  swapy.value?.destroy()
})
</script>

<template>
  <div ref="container">

    <div data-swapy-slot="a">
      <div data-swapy-item="a">
        <div>A</div>
      </div>
    </div>

    <div data-swapy-slot="b">
      <div data-swapy-item="b">
        <div>B</div>
      </div>
    </div>

  </div>
</template>
```

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

### Initialize slotItemMap

Source: https://swapy.tahazsh.com/docs/framework-vue-dynamic

Create a ref for the slotItemMap and update it during swap events.

```javascript
<script setup>
  import { createSwapy, utils } from 'swapy'

  const slotItemMap = ref(utils.initSlotItemMap(users.value, 'userId')) 
  // ...
  onMounted(() => {
    swapy.value = createSwapy(container.value, {
      manualSwap: true
    })
    swapy.value.onSwap(event => { 
      requestAnimationFrame(() => { 
        slotItemMap.value = event.newSlotItemMap.asArray 
      }) 
    }) 
  })
</script>
```

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

### Original Vue Template

Source: https://swapy.tahazsh.com/docs/framework-vue-dynamic

The initial template structure before integrating Swapy's slotted items.

```html
<template>
  <div ref="container">

    <div class="users">
        <div
          v-for="user in users"
          class="slot"
          :key="user.userId"
          :data-swapy-slot="user.userId"
        >

          <div class="user" :key="user.userId" :data-swapy-item="user.userId">
            <span>{{user.name}}</span>

            <button @click="() => {
              users = users.filter(u => u.userId !== user.userId)
            }">Delete</button>
          </div>

        </div>
    </div>

    <button @click="() => {
      users.push(/*newUser*/)
    }">Add User</button>

  </div>
</template>
```

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

### Enable manualSwap in Svelte

Source: https://swapy.tahazsh.com/docs/framework-svelte-dynamic

Configure the Swapy instance within the onMount lifecycle hook to enable manual DOM control.

```svelte
<script>
  onMount(() => {
    swapy.value = createSwapy(container, {
      manualSwap: true
    })
  })

  onDestroy(() => {
    swapy.value?.destroy()
  })
</script>
```

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

### Initialize Swapy with disabled state

Source: https://swapy.tahazsh.com/docs/enabled

Sets the initial enabled state to false during Swapy creation. Use swapy.enable(true) later to activate functionality.

```javascript
createSwapy(container, {
  enabled: false
})
```

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

### Create Swapy with Spring Animation

Source: https://swapy.tahazsh.com/docs/animation

Configure Swapy to use 'spring' animation for a bouncy effect. This is an alternative to the default.

```javascript
createSwapy(container, {
  animation: 'spring'
})
```

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

### Listen to the swapEnd event

Source: https://swapy.tahazsh.com/docs/swap-end-event

Register a callback function to execute when a swapping session concludes.

```javascript
swapy.onSwapEnd((event) => {
  console.log(event)
})
```

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

### Configure Swapy for drop-based swapping

Source: https://swapy.tahazsh.com/docs/swap-mode

Sets the swap mode to drop, requiring the user to release the dragged item over a slot to trigger the swap.

```javascript
createSwapy(container, {
  swapMode: 'drop'
})
```

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

### Listening for Swap Events

Source: https://swapy.tahazsh.com/docs/swap-event

You can listen for the swap event using the `swapy.onSwap()` function. This function takes a callback that will be executed whenever a swap occurs.

```APIDOC
## Listening for Swap Events

### Description
Use the `swapy.onSwap()` function to register a callback that will be executed when a swap event occurs. This allows you to react to changes in the item arrangement.

### Method
`swapy.onSwap(callback)`

### Parameters
#### Callback Function
- **callback** (function) - Required - A function that will receive the event object as its argument when a swap occurs.

### Request Example
```javascript
swapy.onSwap((event) => {
  console.log(event);
});
```

### Response
#### Event Object Structure
The callback function receives an `event` object with the following properties:

- **newSlotItemMap** (object) - Contains the mapping of slots to items after the swap. It has three formats: `asArray`, `asObject`, and `asMap`.
- **oldSlotItemMap** (object) - Contains the mapping of slots to items before the swap. It has three formats: `asArray`, `asObject`, and `asMap`.
- **fromSlot** (string) - The ID of the slot from which the item was dragged.
- **toSlot** (string) - The ID of the slot into which the item was dragged.
- **draggingItem** (string) - The ID of the item being dragged.
- **swappedWithItem** (string) - The ID of the item that was swapped with.

#### Event Object Example
```javascript
{
  "newSlotItemMap": {
    "asObject": {
      "foo": "a",
      "bar": "b",
      "baz": "c"
    },
    "asArray": [
      { "slot": "foo", "item": "a" },
      { "slot": "bar", "item": "b" },
      { "slot": "baz", "item": "c" }
    ],
    "asMap": {
      "foo": "a",
      "bar": "b",
      "baz": "c"
    }
  },
  "oldSlotItemMap": {
    "asObject": {
      "foo": "a",
      "bar": "b",
      "baz": "c"
    },
    "asArray": [
      { "slot": "foo", "item": "a" },
      { "slot": "bar", "item": "b" },
      { "slot": "baz", "item": "c" }
    ],
    "asMap": {
      "foo": "a",
      "bar": "b",
      "baz": "c"
    }
  },
  "fromSlot": "foo",
  "toSlot": "bar",
  "draggingItem": "b",
  "swappedWithItem": "a"
}
```
```

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

### Synchronize Swapy with Dynamic Updates

Source: https://swapy.tahazsh.com/docs/framework-svelte-dynamic

Use the utils.dynamicSwapy helper within an $effect to keep the Swapy instance in sync with data changes.

```svelte
<script>
  let slotItemMap = $state(utils.initSlotItemMap(users, 'userId'))
  let slottedItems = $derived(utils.toSlottedItems(users, 'userId', slotItemMap))
  $effect(() => { 
    utils.dynamicSwapy( 
      swapy, 
      users, 
      'userId', 
      untrack(() => slotItemMap), 
      setSlotItemMap 
    ) 
  }) 
  // ...
</script>
```

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

### Enable Drag on Hold in Swapy

Source: https://swapy.tahazsh.com/docs/drag-on-hold

Enable the `dragOnHold` option to initiate drag sessions after a click-and-hold gesture. This is useful for delayed drag interactions.

```javascript
createSwapy(container, {
  dragOnHold: true
})
```

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

### Listen to Swapy Swap Events

Source: https://swapy.tahazsh.com/

Handle swap events to retrieve the updated order in map, object, or array formats.

```javascript
import { createSwapy } from 'swapy'

const container = document.querySelector('.container')

const swapy = createSwapy(container)

swapy.onSwap((event) => {
  console.log(event.newSlotItemMap.asArray);
  console.log(event.newSlotItemMap.asObject);
  console.log(event.newSlotItemMap.asMap);

  // event.newSlotItemMap.asObject:
  // {
  //   'foo': 'a',
  //   'bar': 'b',
  //   'baz': 'c'
  // }

  // event.newSlotItemMap.asArray:
  // [
  //   { slot: 'foo', item: 'a' },
  //   { slot: 'bar', item: 'b' },
  //   { slot: 'baz', item: 'c' }
  // ]

  // event.newSlotItemMap.asMap:
  // Map(3) {
  // 'foo' => 'a',
  // 'bar' => 'b',
  // 'baz' => 'c'
  // }
})
```

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

### Enable manualSwap in Vue

Source: https://swapy.tahazsh.com/docs/framework-vue-dynamic

Configure the Swapy instance within the onMounted lifecycle hook to handle manual DOM updates.

```javascript
<script setup>
  onMounted(() => {
    swapy.value = createSwapy(container.current, {
      manualSwap: true
    })
  })

  onUnmounted(() => {
    swapy.value?.destroy()
  })
</script>
```

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

### Listen for Swap Events in Swapy

Source: https://swapy.tahazsh.com/docs/swap-event

Use `swapy.onSwap()` to register a callback function that will be executed whenever a swap occurs. The callback receives an event object containing details about the swap.

```javascript
swapy.onSwap((event) => {
  console.log(event)
})
```

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

### Initialize slotItemMap State

Source: https://swapy.tahazsh.com/docs/framework-svelte-dynamic

Create a reactive state for the slotItemMap and update it during swap events using the onSwap callback.

```svelte
<script>
  import { createSwapy, utils } from 'swapy'

  let slotItemMap = $state(utils.initSlotItemMap(users, 'userId')) 
  // ...
  onMount(() => {
    swapy = createSwapy(container, {
      manualSwap: true
    })
    swapy.onSwap((event) => { 
      requestAnimationFrame(() => { 
        slotItemMap = event.newSlotItemMap.asArray 
      }) 
    }) 
  })
</script>
```

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

### Initialize Swapy in React

Source: https://swapy.tahazsh.com/docs/framework-react

Uses useRef to manage the Swapy instance and container, ensuring proper initialization and cleanup within a useEffect hook.

```typescript
import { createSwapy } from 'swapy'
import { useEffect, useRef } from 'react'

function App() {
  const swapy = useRef(null)
  const container = useRef(null)

  useEffect(() => {
    // If container element is loaded
    if (container.current) {
      swapy.current = createSwapy(container.current)

      // Your event listeners
      swapy.current.onSwap((event) => {
        console.log('swap', event);
      })
    }

    return () => {
      // Destroy the swapy instance on component destroy
      swapy.current?.destroy()
    }
  }, [])

  return (
    <div ref={container}>

      <div data-swapy-slot="a">
        <div data-swapy-item="a">
          <div>A</div>
        </div>
      </div>

      <div data-swapy-slot="b">
        <div data-swapy-item="b">
          <div>B</div>
        </div>
      </div>

    </div>
  )
}
```

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

### Enable or Disable Swapy

Source: https://swapy.tahazsh.com/docs/method-enable

Control the enabled state of your Swapy instance. It is enabled by default.

```APIDOC
## Enable or Disable Swapy

### Description
Allows you to enable or disable the Swapy service. The service is enabled by default upon initialization.

### Method
`swapy.enable(boolean)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// To disable Swapy
swapy.enable(false);

// To re-enable Swapy
swapy.enable(true);
```

### Response
#### Success Response (200)
This method does not return a value, but modifies the internal state of Swapy.

#### Response Example
None
```

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

### Initialize and Update slotItemMap State in React

Source: https://swapy.tahazsh.com/docs/framework-react-dynamic

Manage the `slotItemMap` state using `useState` and initialize it with `utils.initSlotItemMap`. Update this state within the `onSwap` event handler to reflect changes in the Swapy instance.

```javascript
import { createSwapy, utils } from 'swapy'

function App() {
  const [slotItemMap, setSlotItemMap] = useState(utils.initSlotItemMap(users, 'userId'))
  // ...
  useEffect(() => {
    swapyRef.current = createSwapy(containerRef.current, {
      manualSwap: true
    })

    swapyRef.current.onSwap((event) => { 
      setSlotItemMap(event.newSlotItemMap.asArray)
    }) 

    return () => {
      swapyRef.current?.destroy()
    }
  }, [])
}
```

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

### Toggle Swapy instance state

Source: https://swapy.tahazsh.com/docs/method-enable

Use the enable method to toggle the active state of a Swapy instance.

```javascript
swapy.enable(false)
```

```javascript
swapy.enable(true)
```

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

### Listen to the beforeSwap event

Source: https://swapy.tahazsh.com/docs/before-swap-event

Use this method to intercept swap attempts. Returning true from the handler permits the swap.

```javascript
swapy.onBeforeSwap((event) => {
  console.log(event)
  return true
})
```

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

### Accessing the Event Object Data

Source: https://swapy.tahazsh.com/docs/swap-end-event

Demonstrates how to retrieve the slot-to-item map in various formats and check the change status from the event object.

```javascript
swapy.onSwapEnd((event) => {
  console.log(event.slotItemMap.asObject)
  // {
  //   'foo': 'a',
  //   'bar': 'b',
  //   'baz': 'c'
  // }

  console.log(event.slotItemMap.asArray)
  // [
  //   { slot: 'foo', item: 'a' },
  //   { slot: 'bar', item: 'b' },
  //   { slot: 'baz', item: 'c' }
  // ]

  console.log(event.slotItemMap.asMap)
  // Map(3) {
  // 'foo' => 'a',
  // 'bar' => 'b',
  // 'baz' => 'c'
  // }

  console.log(event.hasChanged)
  // false
})
```

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

### Update Swapy Instance on Data Changes

Source: https://swapy.tahazsh.com/docs/framework-vue-dynamic

Use the dynamicSwapy helper within a watcher to keep the Swapy instance in sync with data changes.

```javascript
<script setup>
  const slotItemMap = ref(utils.initSlotItemMap(users.value, 'userId'))
  const slottedItems = computed(() => utils.toSlottedItems(users.value, 'userId', slotItemMap.value))
  watch(users, () =>
    utils.dynamicSwapy(swapy.value, users.value, 'userId', slotItemMap.value, (value) => slotItemMap.value = value), 
    { deep: true } 
  ) 
  // ...
</script>
```

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

### Access Swap Event Details in Swapy

Source: https://swapy.tahazsh.com/docs/swap-event

The event object passed to `swapy.onSwap()` provides detailed information about the swap, including the state of slots before and after the swap, and the items involved. You can access the new and old slot-to-item mappings in various formats (`asObject`, `asArray`, `asMap`), as well as the source and destination slots and the items being moved.

```javascript
swapy.onSwap((event) => {
  console.log(event.newSlotItemMap.asObject)
  // {
  //   'foo': 'a',
  //   'bar': 'b',
  //   'baz': 'c'
  // }

  console.log(event.newSlotItemMap.asArray)
  // [
  //   { slot: 'foo', item: 'a' },
  //   { slot: 'bar', item: 'b' },
  //   { slot: 'baz', item: 'c' }
  // ]

  console.log(event.newSlotItemMap.asMap)
  // Map(3) {
  // 'foo' => 'a',
  // 'bar' => 'b',
  // 'baz' => 'c'
  // }

  console.log(event.fromSlot)
  // 'foo'

  console.log(event.toSlot)
  // 'bar'

  console.log(event.draggingItem)
  // 'b'

  console.log(event.swappedWithItem)
  // 'a'
})
```

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

### Configure Swapy for hover-based swapping

Source: https://swapy.tahazsh.com/docs/swap-mode

Sets the swap mode to hover, which is the default behavior where items swap as soon as the dragged item is hovered over a slot.

```javascript
createSwapy(container, {
  swapMode: 'hover'
})
```

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

### Define Swapy Slots and Items

Source: https://swapy.tahazsh.com/

Markup structure using data-swapy-slot and data-swapy-item attributes to define draggable areas.

```html
<div class="container">
  <div class="section-1" data-swapy-slot="foo">
    <div class="content-a" data-swapy-item="a">
      <!-- Your content for content-a goes here -->
    </div>
  </div>

  <div class="section-2" data-swapy-slot="bar">
    <div class="content-b" data-swapy-item="b">
      <!-- Your content for content-b goes here -->
      <div class="handle" data-swapy-handle></div>
    </div>
  </div>

  <div class="section-3" data-swapy-slot="baz">
    <div class="content-c" data-swapy-item="c">
      <!-- Your content for content-c goes here -->
    </div>
  </div>
</div>
```

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

### Update Swapy After Content Changes

Source: https://swapy.tahazsh.com/docs/update

Call `swapy.update()` after adding or removing items/slots to ensure Swapy recognizes the changes. This is necessary for dynamic Swapy containers.

```javascript
function afterAdd() {
  swapy.update()
}
```

```javascript
function afterRemove() {
  swapy.update()
}
```

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

### Enable manualSwap in React

Source: https://swapy.tahazsh.com/docs/framework-react-dynamic

Enable manualSwap in Swapy configurations when using React to allow Swapy to hand DOM updates over to the framework. This is typically done within a useEffect hook on component mount.

```javascript
useEffect(() => {
  swapyRef.current = createSwapy(containerRef.current, {
    manualSwap: true
  })

  return () => {
    swapyRef.current?.destroy()
  }
}, [])
```

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

### Create SlottedItems using useMemo in React

Source: https://swapy.tahazsh.com/docs/framework-react-dynamic

Compute the `slottedItems` array using `useMemo` based on the current `users` data and `slotItemMap`. This ensures that `slottedItems` is only recalculated when `users` or `slotItemMap` changes.

```javascript
function App() {
  const [slotItemMap, setSlotItemMap] = useState(utils.initSlotItemMap(users, 'userId')) 
  const slottedItems = useMemo(() => utils.toSlottedItems(users, 'userId', slotItemMap), [users, slotItemMap]) 
  // ...
}
```

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

### Define a Swapy Item

Source: https://swapy.tahazsh.com/docs/simple-example

Use the `data-swapy-item` attribute to define an item that can be placed into a slot. The item name can be the same as a slot name.

```html
<div data-swapy-item="bar"></div>
```

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

### Create Swapy with No Animation

Source: https://swapy.tahazsh.com/docs/animation

Set animation to 'none' to disable all animations in Swapy. Useful for performance-critical applications or specific UI designs.

```javascript
createSwapy(container, {
  animation: 'none'
})
```

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

### Conditional swap prevention

Source: https://swapy.tahazsh.com/docs/before-swap-event

Demonstrates accessing event properties to implement custom logic for preventing swaps based on slot IDs.

```javascript
swapy.onBeforeSwap((event) => {
  console.log(event.fromSlot)
  // 'foo'

  console.log(event.toSlot)
  // 'bar'

  console.log(event.draggingItem)
  // 'b'

  console.log(event.swappedWithItem)
  // 'a'

  return event.toSlot !== 'foo'
})
```

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

### Define a Swapy Slot

Source: https://swapy.tahazsh.com/docs/simple-example

Use the `data-swapy-slot` attribute to define an area that can hold an item. Ensure the name is unique across all slots.

```html
<div data-swapy-slot="foo"></div>
```

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

### Destroy Swapy Instance

Source: https://swapy.tahazsh.com/docs/destroy

Call `swapy.destroy()` to clean up event listeners and stored state. Recommended in framework component destroy hooks.

```javascript
swapy.destroy()
```

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

### Update Swapy Instance Dynamically in React

Source: https://swapy.tahazsh.com/docs/framework-react-dynamic

Use the `utils.dynamicSwapy` helper function within a `useEffect` hook to synchronize Swapy's instance with changes in your data (`users`) and `slotItemMap`. This function handles updating both Swapy and the `slotItemMap` state.

```javascript
function App() {
  const [slotItemMap, setSlotItemMap] = useState(utils.initSlotItemMap(users, 'userId')) 
  const slottedItems = useMemo(() => utils.toSlottedItems(users, 'userId', slotItemMap), [users, slotItemMap])
  useEffect(() => utils.dynamicSwapy(swapyRef.current, users, 'userId', slotItemMap, setSlotItemMap), [users]) 
  // ...
}
```

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

### Create SlottedItems Derived State

Source: https://swapy.tahazsh.com/docs/framework-svelte-dynamic

Use the $derived rune to compute the slottedItems array based on the current slotItemMap.

```svelte
<script>
  let slotItemMap = $state(utils.initSlotItemMap(users, 'userId'))
  let slottedItems = $derived(utils.toSlottedItems(users, 'userId', slotItemMap)) 
  // ...
</script>
```

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

### swapy.destroy()

Source: https://swapy.tahazsh.com/docs/destroy

The destroy method removes event listeners and clears state associated with a Swapy instance.

```APIDOC
## swapy.destroy()

### Description
Calling `swapy.destroy()` cleans up any event listeners and any stored state associated with the instance. It is recommended to call this in a component's destroy hook when using a framework.

### Method
Method call

### Endpoint
swapy.destroy()

### Response
- **void** - Returns nothing.
```

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

### Update Svelte Template for SlottedItems

Source: https://swapy.tahazsh.com/docs/framework-svelte-dynamic

Replace direct data iteration with slottedItems to allow Swapy to manage item and slot identifiers.

```svelte
<template>
  <div bind:this={container}>

    <div class="users">
      {#each users as user}
        {#key user.userId}
          <div
            class="slot"
            data-swapy-slot={user.userId}
          >

            {#key user.userId}
              <div class="user" data-swapy-item={user.userId}>
                <span>{user.name}</span>

                <button onclick={() => {
                  users = users.filter(u => u.userId !== user.userId)
                }}>Delete</button>
              </div>
            {/key}

          </div>
        {/key}

      {/each}
    </div>

    <button onclick={() => {
      users.push(/*newUser*/)
    }}>Add User</button>

  </div>
</template>
```

```svelte
<template>
  <div ref="container">

    <div class="users">
      {#each slottedItems as { slotId, itemId, item: user }}

        {#key slotId}
          <div class="slot" data-swapy-slot={slotId}>
            {#key itemId}
              <div class="user" data-swapy-item={itemId}>
                <span>{user.name}</span>

                <button onclick={() => {
                  users = users.filter(u => u.userId !== user.userId)
                }}>Delete</button>
              </div>
            {/key}
          </div>
        {/key}

      {/each}
    </div>

    <button onclick={() => {
      users.push(/*newUser*/)
    }}>Add User</button>

  </div>
</template>
```

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

### Enable Auto-scroll on Drag in Swapy

Source: https://swapy.tahazsh.com/docs/auto-scroll-on-drag

Enables automatic scrolling of the nearest scrollable container when dragging an item near its edge.

```javascript
createSwapy(container, {
  autoScrollOnDrag: true
})
```

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

### Style Highlighted Slot with CSS

Source: https://swapy.tahazsh.com/docs/style-highlighted-slot

Use the `data-swapy-highlighted` attribute to apply custom styles to slots when they are hovered over. This CSS targets elements with the specified attribute.

```css
.slot[data-swapy-highlighted] {
  background: rgba(255, 255, 255, 0.2);
}
```

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

### Configure Swapy Drag Axis

Source: https://swapy.tahazsh.com/docs/drag-axis

Use the dragAxis option to restrict dragging to both axes, vertical only, or horizontal only.

```javascript
createSwapy(container, {
  dragAxis: 'both'
})
```

```javascript
createSwapy(container, {
  dragAxis: 'y' // vertical
})
```

```javascript
createSwapy(container, {
  dragAxis: 'x' // horizontal
})
```

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

### Create SlottedItems Computed Property

Source: https://swapy.tahazsh.com/docs/framework-vue-dynamic

Generate the slottedItems array using the utils.toSlottedItems helper.

```javascript
<script setup>
  const slotItemMap = ref(utils.initSlotItemMap(users.value, 'userId'))
  const slottedItems = computed(() => utils.toSlottedItems(users.value, 'userId', slotItemMap.value)) 
  // ...
</script>
```

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

### Style Dragged Item in Swapy

Source: https://swapy.tahazsh.com/docs/style-dragging-item

Apply custom styles to the item being dragged by targeting the `[data-swapy-dragging]` attribute in CSS. This is useful for providing visual feedback to the user.

```css
.item[data-swapy-dragging] {
  opacity: 0.6;
}
```

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

### Updated Vue Template with SlottedItems

Source: https://swapy.tahazsh.com/docs/framework-vue-dynamic

The modified template using slottedItems to enable dynamic swapping.

```html
<template>
  <div ref="container">

    <div class="users">
      <div
        v-for="{ slotId, itemId, item: user } in slottedItems"
        class="slot"
        :key="slotId"
        :data-swapy-slot="slotId"
      >

        <div class="user" :key="itemId" :data-swapy-item="itemId">
          <span>{{user.name}}</span>

          <button @click="() => {
            users = users.filter(u => u.userId !== user.userId)
          }">Delete</button>
        </div>

      </div>
    </div>

    <button @click="() => {
      users.push(/*newUser*/)
    }">Add User</button>

  </div>
</template>
```

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

### Define a drag handle for a Swapy item

Source: https://swapy.tahazsh.com/docs/handle-element

Add the data-swapy-handle attribute to an element within a swapy item to restrict dragging to that specific area.

```html
<div data-swapy-item="foo">
  <!-- This div is now the handle -->
  <div data-swapy-handle></div>
  <!-- Item content... -->
</div>
```

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

### Prevent Dragging on Specific Elements

Source: https://swapy.tahazsh.com/docs/no-drag-element

Add the `data-swapy-no-drag` attribute to any element within a Swapy item to prevent it from being dragged. This is useful for interactive elements like buttons or links inside a draggable item.

```html
<div data-swapy-item="foo">
  <div data-swapy-no-drag></div>
  <button data-swapy-no-drag></button>
  <!-- Item content... -->
</div>
```

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

### Update JSX for SlottedItems in React

Source: https://swapy.tahazsh.com/docs/framework-react-dynamic

Modify your JSX to iterate over `slottedItems` instead of your raw data array. This involves destructuring `slotId`, `itemId`, and `item` from each element in `slottedItems` and using `slotId` and `itemId` for keys and data attributes.

```javascript
<div ref={containerRef}>

  <div className="users">
    {users.map((user) => (
      <div className="slot" key={user.userId} data-swapy-slot={user.userId}>

        <div className="user" key={user.userId} data-swapy-item={user.userId}>
          <span>{user.name}</span>

          <button onClick={() => {
            setUsers(users.filter(u => u.userId !== user.userId))
          }}>Delete</button>
        </div>

      </div>
    ))}
  </div>

  <button onClick={() => {
    setUsers([/*New User*/])
  }}>Add User</button>

</div>
```

```javascript
<div ref={containerRef}>

  <div className="users">
    {slottedItems.map(({ slotId, itemId, item: user }) => (
      <div className="slot" key={slotId} data-swapy-slot={slotId}>

        <div className="user" key={itemId} data-swapy-item={itemId}>
          <span>{user.name}</span>

          <button onClick={() => {
            setUsers(users.filter(u => u.userId !== user.userId))
          }}>Delete</button>
        </div>

      </div>
    ))}
  </div>

  <button onClick={() => {
    setUsers([/*New User*/])
  }}>Add User</button>

</div>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.