### Install vue-draggable-plus

Source: https://github.com/alfred-skyblue/vue-draggable-plus/blob/main/src/__docs__/guide/index.en-US.md

Install the vue-draggable-plus package using npm.

```bash
npm install vue-draggable-plus
```

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

### Event Handling with v-on

Source: https://github.com/alfred-skyblue/vue-draggable-plus/blob/main/src/__docs__/api/index.zh-CN.md

Demonstrates how to use v-on to listen for drag events like 'start' and 'end' emitted by the VueDraggable component. The 'onStart' and 'onEnd' functions are called when the respective events are triggered.

```APIDOC
## Event Handling with v-on

### Description
All event functions starting with `on` can be passed to the component using `v-on`.

### Example Usage
```vue
<template>
  <VueDraggable v-model="list" @start="onStart" @end="onEnd">
    <div v-for="item in list" :key="item.id">
      {{ item.name }}
    </div>
  </VueDraggable>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { VueDraggable, DraggableEvent } from 'vue-draggable-plus'

const list = ref([
  {
    name: 'Joao',
    id: '1'
  },
  {
    name: 'Jean',
    id: '2'
  },
  {
    name: 'Johanna',
    id: '3'
  },
  {
    name: 'Juan',
    id: '4'
  }
])

function onStart(event: DraggableEvent) {
  console.log('开始拖拽')
}

function onEnd(event: DraggableEvent) {
  console.log('拖拽结束')
}
</script>
```

> For Hooks and directive usage, please refer to the documentation.
```

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

### Incorrect Usage: Multiple Root Elements

Source: https://github.com/alfred-skyblue/vue-draggable-plus/blob/main/src/__docs__/target-container/index.en-US.md

This example demonstrates an incorrect usage pattern where the component contains multiple root elements, which can lead to issues when specifying a target container.

```vue
<template>
  <!-- ❌ -->
  <div id="my-container">
    <ElTable :list="list"></ElTable>
  </div>
  <div class="flex justify-between">
    <pre class="code-block">{{ text }}</pre>
  </div>
</template>
```

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

### Correct Usage: Single Root Element

Source: https://github.com/alfred-skyblue/vue-draggable-plus/blob/main/src/__docs__/target-container/index.en-US.md

This example shows the correct way to structure a component with a single root element, ensuring proper functionality when specifying a target container for drag operations.

```vue
<template>
  <!-- ✅ -->
  <div>
    <div id="my-container">
      <ElTable :list="list"></ElTable>
    </div>
    <div class="flex justify-between">
      <pre class="code-block">{{ text }}</pre>
    </div>
  </div>
</template>
```

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

### Vue Component with Drag and Drop Events

Source: https://github.com/alfred-skyblue/vue-draggable-plus/blob/main/src/__docs__/api/index.zh-CN.md

Demonstrates how to use the VueDraggable component with v-on to handle start and end drag events. Ensure the component is imported and the list data is reactive.

```vue
<template>
  <VueDraggable v-model="list" @start="onStart" @end="onEnd">
    <div v-for="item in list" :key="item.id">
      {{ item.name }}
    </div>
  </VueDraggable>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { VueDraggable, DraggableEvent } from 'vue-draggable-plus'

const list = ref([
  {
    name: 'Joao',
    id: '1'
  },
  {
    name: 'Jean',
    id: '2'
  },
  {
    name: 'Johanna',
    id: '3'
  },
  {
    name: 'Juan',
    id: '4'
  }
])

function onStart(event: DraggableEvent) {
  console.log('开始拖拽')
}

function onEnd(event: DraggableEvent) {
  console.log('拖拽结束')
}
</script>
```

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

### VueDraggable Component Usage

Source: https://github.com/alfred-skyblue/vue-draggable-plus/blob/main/src/__docs__/api/index.en-US.md

Demonstrates how to use the VueDraggable component in a Vue template, including binding a model and handling drag start and end events.

```APIDOC
## VueDraggable Component Usage

### Description
This example shows how to integrate the `VueDraggable` component into a Vue application. It demonstrates how to bind a list to the `v-model` directive and how to listen for drag events like `start` and `end` using `v-on`.

### Component
`<VueDraggable>`

### Props
- `v-model`: Binds the list data to the draggable component.

### Events
- `@start`: Emitted when dragging starts. Accepts a callback function.
- `@end`: Emitted when dragging ends. Accepts a callback function.

### Request Example
```vue
<template>
  <VueDraggable v-model="list" @start="onStart" @end="onEnd">
    <div
        v-for="item in list"
        :key="item.id"
    >
      {{ item.name }}
    </div>
  </VueDraggable>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { VueDraggable, DraggableEvent } from 'vue-draggable-plus'

const list = ref([
  {
    name: 'Joao',
    id: '1'
  },
  {
    name: 'Jean',
    id: '2'
  },
  {
    name: 'Johanna',
    id: '3'
  },
  {
    name: 'Juan',
    id: '4'
  }
])

function onStart(event: DraggableEvent) {
  console.log('start drag')
}

function onEnd(event: DraggableEvent) {
  console.log('end drag')
}
</script>
```
```

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

### Implemented Using Directive

Source: https://github.com/alfred-skyblue/vue-draggable-plus/blob/main/src/__docs__/transitions/index.en-US.md

Implement transition effects using a directive for drag-and-drop and restoration.

```vue
<template>
  <div class="transition-demo">
    <ul v-draggable-directive
        :list="list"
        item-key="id"
        animation="400"
        :transition="{
          delay: 0.15,
          duration: 0.4,
          easing: 'ease-out'
        }"
        class="drag-list"
    >
      <template #item="{ element }">
        <li class="list-item">{{ element.name }}</li>
      </template>
    </ul>
    <div class="buttons">
      <button @click="restore">Restore</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import vDraggableDirective from '@/directives/draggable';

interface Item {
  id: number;
  name: string;
}

const originalList = ref<Item[]>([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
  { id: 4, name: 'Item 4' },
]);

const list = ref<Item[]>([...originalList.value]);

const restore = () => {
  list.value = [...originalList.value];
};
</script>

<style scoped>
.transition-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.drag-list {
  min-height: 100px;
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
  list-style: none;
  padding-left: 0;
}
.list-item {
  background-color: #f9f9f9;
  border: 1px solid #eee;
  padding: 8px;
  margin-bottom: 5px;
  cursor: grab;
}
.buttons {
  margin-top: 10px;
}
</style>

```

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

### Function Usage: Using function

Source: https://github.com/alfred-skyblue/vue-draggable-plus/blob/main/src/__docs__/transition/index.en-US.md

Implement transition animations by using a function. This allows for dynamic control over transition properties.

```vue
<template>
  <draggable :transition="transition" :list="list" item-key="id">
    <template #item="{ element }">
      <div class="list-item" :key="element.id">
        {{ element.name }}
      </div>
    </template>
  </draggable>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import draggable from '../../src/vuedraggable'

const list = ref([
  { id: 1, name: 'item 1' },
  { id: 2, name: 'item 2' },
  { id: 3, name: 'item 3' },
])

const transition = {
  duration: 500,
  delay: 200,
  easing: 'ease-in-out',
}
</script>
<style>
.list-item {
  padding: 10px;
  margin: 5px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}
</style>
```

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

### Basic Vue Draggable Usage with Event Handling

Source: https://github.com/alfred-skyblue/vue-draggable-plus/blob/main/src/__docs__/api/index.en-US.md

Demonstrates how to use the VueDraggable component with v-model for data binding and @start/@end events for drag-and-drop lifecycle hooks. Ensure VueDraggable and DraggableEvent are imported.

```vue
<template>
  <VueDraggable v-model="list" @start="onStart" @end="onEnd">
    <div
        v-for="item in list"
        :key="item.id"
    >
      {{ item.name }}
    </div>
  </VueDraggable>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { VueDraggable, DraggableEvent } from 'vue-draggable-plus'

const list = ref([
  {
    name: 'Joao',
    id: '1'
  },
  {
    name: 'Jean',
    id: '2'
  },
  {
    name: 'Johanna',
    id: '3'
  },
  {
    name: 'Juan',
    id: '4'
  }
])

function onStart(event: DraggableEvent) {
  console.log('start drag')
}

function onEnd(event: DraggableEvent) {
  console.log('end drag')
}
</script>

```

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

### Handling Drag Events with VueDraggable

Source: https://github.com/alfred-skyblue/vue-draggable-plus/blob/main/README.md

Attach event listeners like @start and @end to the VueDraggable component to react to drag and drop actions. The event object provides details about the drag operation.

```vue
<template>
  <VueDraggable v-model="list" @start="onStart" @end="onEnd"></VueDraggable>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { VueDraggable } from 'vue-draggable-plus'
import { SortableEvent } from "sortablejs";

const list = ref([
  {
    name: 'Joao',
    id: '1'
  },
  {
    name: 'Jean',
    id: '2'
  },
  {
    name: 'Johanna',
    id: '3'
  },
  {
    name: 'Juan',
    id: '4'
  }
])

function onStart(event: SortableEvent) {
  console.log('start drag')
}

function onEnd(event: SortableEvent) {
  console.log('end drag')
}
</script>

```

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

### Configuration Props

Source: https://github.com/alfred-skyblue/vue-draggable-plus/blob/main/src/__docs__/api/index.en-US.md

These props allow you to configure the behavior of the draggable component.

```APIDOC
## Props

### removeCloneOnHide

- **Description**: Remove instead of hiding cloned element when not displayed
- **Type**: `Boolean`
- **Default**: `true`

### sort

- **Description**: Allow list items to be sorted within container
- **Type**: `Boolean`
- **Default**: `true`

### swapThreshold

- **Description**: Swap zone threshold
- **Type**: `Number`
- **Default**: `1`

### touchStartThreshold

- **Description**: Pixels before cancelling delay touch event
- **Type**: `Number`
- **Default**: `1`

### setData

- **Description**: Pass a function where the first argument is of type `DataTransfer` and the second argument is of type `HTMLElement`
- **Type**: `Function`

### scroll

- **Description**: Enable scrolling
- **Type**: `Boolean`
- **Default**: `true`

### scrollFn

- **Description**: Custom scroll function
- **Type**: `ScrollFn`

### scrollSensitivity

- **Description**: The distance in pixels the mouse must be to the edge to start scrolling
- **Type**: `Number`

### scrollSpeed

- **Description**: The scrolling speed in ms/px
- **Type**: `number`

### bubbleScroll

- **Description**: Enables automatic scrolling for all parent elements to make it easier to move items
- **Type**: `Boolean`
- **Default**: `true`
```

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

### Combining Transitions Using Function

Source: https://github.com/alfred-skyblue/vue-draggable-plus/blob/main/src/__docs__/transitions/index.en-US.md

Combine transitions using a function for dynamic control over animation and restoration effects.

```vue
<template>
  <div class="transition-demo">
    <draggable
      :list="list"
      item-key="id"
      :animation="getAnimation"
      :transition="getTransition"
      class="drag-list"
    >
      <template #item="{ element }">
        <div class="list-item">{{ element.name }}</div>
      </template>
    </draggable>
    <div class="buttons">
      <button @click="restore">Restore</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import draggable from '@/vuedraggable';

interface Item {
  id: number;
  name: string;
}

const originalList = ref<Item[]>([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
  { id: 4, name: 'Item 4' },
]);

const list = ref<Item[]>([...originalList.value]);

const getAnimation = () => {
  return 500; // Example: fixed animation duration
};

const getTransition = () => {
  return {
    delay: 0.2,
    duration: 0.5,
    easing: 'ease-out'
  };
};

const restore = () => {
  list.value = [...originalList.value];
};
</script>

<style scoped>
.transition-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.drag-list {
  min-height: 100px;
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
}
.list-item {
  background-color: #f9f9f9;
  border: 1px solid #eee;
  padding: 8px;
  margin-bottom: 5px;
  cursor: grab;
}
.buttons {
  margin-top: 10px;
}
</style>

```

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

### Configuration Properties

Source: https://github.com/alfred-skyblue/vue-draggable-plus/blob/main/README.md

These properties allow you to customize the drag-and-drop functionality, such as controlling element visibility, sorting, and scroll behavior.

```APIDOC
## Configuration Properties

| Property Name           | Description                                                                                                | Type     | Default Value | 
|-------------------------|------------------------------------------------------------------------------------------------------------|----------|---------------|
| `removeCloneOnHide`     | Remove instead of hiding cloned element when not displayed                                                 | `Boolean`  | `true`        |
| `sort`                  | Allow list items to be sorted within container                                                             | `Boolean`  | `true`        |
| `swapThreshold`         | Swap zone threshold                                                                                        | `Number`   | `1`           |
| `touchStartThreshold`   | Pixels before cancelling delay touch event                                                                 | `Number`   | `1`           |
| `setData`               | Pass a function where the first argument is of type `DataTransfer` and the second argument is of type `HTMLElement` | `Function` | `-`           |
| `scroll`                | Enable scrolling                                                                                           | `Boolean`  | `true`        |
| `scrollFn`              | Custom scroll function                                                                                     | `ScrollFn` | `-`           |
| `scrollSensitivity`     | The distance in pixels the mouse must be to the edge to start scrolling                                    | `Number`   | `-`           |
| `scrollSpeed`           | The scrolling speed in ms/px                                                                               | `number`   | `-`           |
| `bubbleScroll`          | Enables automatic scrolling for all parent elements to make it easier to move items                        | `Boolean`  | `true`        |
```

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

### Vue Draggable Plus Configuration Options

Source: https://github.com/alfred-skyblue/vue-draggable-plus/blob/main/src/__docs__/api/index.en-US.md

This section details the various parameters that can be used to configure the Vue Draggable Plus component.

```APIDOC
## Vue Draggable Plus Configuration

This document outlines the various parameters available for configuring the Vue Draggable Plus component.

### Parameters

- **animation** (Number) - Show animation while dragging. Default: 0
- **chosenClass** (String) - CSS class name for chosen item. Default: 'sortable-chosen'
- **delay** (Number) - Delay in milliseconds before drag starts. Default: 0
- **delayOnTouchOnly** (Number) - Delay on touch event. Default: 0
- **direction** (String) - Dragging direction, `vertical` or `horizontal` (default auto detect). Default: auto detect
- **disabled** (Boolean) - Disable dragging. Default: false
- **dragClass** (String) - CSS class name for dragged item. Default: 'sortable-drag'
- **draggable** (String) - Selector for draggable items within element. Default: -
- **emptyInsertThreshold** (Number) - Distance (in pixels) from empty sortable items where dragging element should be inserted. Set to `0` to disable this feature. Default: 5
- **easing** (Easing) - Animation easing. Default: -
- **fallbackClass** (String) - CSS class name for cloned DOM elements when using forceFallback. Default: 'sortable-fallback'
- **fallbackOnBody** (Boolean) - Append cloned DOM element to body element. Default: false
- **fallbackTolerance** (Number) - Pixels mouse must move before drag start when using forceFallback. Default: 0
- **filter** (String) - Selector for items that should not be draggable. Default: -
- **forceFallback** (Boolean) - Ignore HTML5 drag and drop behavior and force fallback. Default: false
- **ghostClass** (String) - CSS class name for drop placeholder. Default: 'sortable-ghost'
- **group** (Group) - Group items to drag between sortable lists. Both lists must have the same `group` value. Also define whether lists can be dragged out of, cloned, or receive elements from other lists. See TypeScript type definition above for details. Default: -
- **handle** (String) - Selector for handle to initiate drag. If not set, the target element's children are used. Default: -
- **invertSwap** (Boolean) - Always use inverted swap zone if set to true. Default: false
- **invertedSwapThreshold** (Number) - Inverted swap zone threshold, defaults to `swapThreshold` value. Default: -
- **preventOnFilter** (Boolean) - Call `event.preventDefault()` on filter event. Default: true

```

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

### Component Composition Transition

Source: https://github.com/alfred-skyblue/vue-draggable-plus/blob/main/src/__docs__/transitions/index.en-US.md

Use this component to implement transition effects when dragging and sorting items, and use the transition attribute for restoration.

```vue
<template>
  <div class="transition-demo">
    <draggable
      :list="list"
      item-key="id"
      animation="300"
      :transition="{
        delay: 0.1,
        duration: 0.3,
        easing: 'ease-in-out'
      }"
      class="drag-list"
    >
      <template #item="{ element }">
        <div class="list-item">{{ element.name }}</div>
      </template>
    </draggable>
    <div class="buttons">
      <button @click="restore">Restore</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import draggable from '@/vuedraggable';

interface Item {
  id: number;
  name: string;
}

const originalList = ref<Item[]>([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
  { id: 4, name: 'Item 4' },
]);

const list = ref<Item[]>([...originalList.value]);

const restore = () => {
  list.value = [...originalList.value];
};
</script>

<style scoped>
.transition-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.drag-list {
  min-height: 100px;
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
}
.list-item {
  background-color: #f9f9f9;
  border: 1px solid #eee;
  padding: 8px;
  margin-bottom: 5px;
  cursor: grab;
}
.buttons {
  margin-top: 10px;
}
</style>

```

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

### Global Registration

Source: https://context7.com/alfred-skyblue/vue-draggable-plus/llms.txt

Register `VueDraggable` and `vDraggable` globally so they are available in every component without per-file imports.

```APIDOC
## Global Registration

Register `VueDraggable` and `vDraggable` globally so they are available in every component without per-file imports.

```ts
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { VueDraggable, vDraggable } from 'vue-draggable-plus'

const app = createApp(App)

app.component('VueDraggable', VueDraggable)
app.directive('draggable', vDraggable)

app.mount('#app')
```
```

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

### Component Usage for Target Container

Source: https://github.com/alfred-skyblue/vue-draggable-plus/blob/main/src/__docs__/target-container/index.en-US.md

Demonstrates using Vue Draggable as the root element to find the nearest '.el-table' selector as the target container.

```vue
<template>
  <ElTable :list="list"></ElTable>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import ElTable from './ElTable.vue'

const list = ref([
  { id: '1', name: 'John' },
  { id: '2', name: 'Doe' },
  { id: '3', name: 'Jane' },
])
</script>
<script>
import { defineComponent } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'

export default defineComponent({
  name: 'App',
  components: {
    VueDraggable,
    ElTable,
  },
  directives: {
    drag: {
      mounted(el, binding) {
        new VueDraggable(el, {
          group: 'elTable',
          animation: 150,
          // Specify the target container
          target: '.el-table',
        })
      },
    },
  },
  setup() {
    return {
      list: [
        { id: '1', name: 'John' },
        { id: '2', name: 'Doe' },
        { id: '3', name: 'Jane' },
      ],
      text: 'This is the text',
    }
  },
})
</script>
```

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

### Group Options Interface

Source: https://github.com/alfred-skyblue/vue-draggable-plus/blob/main/README.md

Configuration options for defining groups of sortable elements, including name, pull, put, and revertClone.

```APIDOC
## Interface: GroupOptions

```ts
interface GroupOptions {
  /**
   * Group name.
   */
  name: string;
  /**
   * The ability to move from the list. Clone - copy the item instead of moving it.
   */
  pull?: PullResult | ((to: Sortable, from: Sortable, dragEl: HTMLElement, event: SortableEvent) => PullResult) | undefined;
  /**
   * Whether elements can be added from other lists, or an array of group names from which elements can be obtained.
   */
  put?: PutResult | ((to: Sortable, from: Sortable, dragEl: HTMLElement, event: SortableEvent) => PutResult) | undefined;
  /**
   * After moving to another list, the cloned element is restored to its initial position.
   */
  revertClone?: boolean | undefined;
}
```
```

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

### Clone using components

Source: https://github.com/alfred-skyblue/vue-draggable-plus/blob/main/src/__docs__/custom-clone/index.en-US.md

Pass the `pull.clone` attribute of the group to realize cloning. Ensure the `pull` attribute is set to `clone` and the `name` attribute in the `group` is consistent for cloning to work.

```vue
<template>
  <draggable
    :list="list"
    group="my-group"
    item-key="id"
    :clone="clone"
  >
    <template #item="{ element }">
      <div>{{ element.name }}</div>
    </template>
  </draggable>
</template>

<script lang="ts" setup>
import draggable from 'vue-draggable-plus'

const list = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
]

const clone = (item) => {
  return { ...item, id: Date.now() } // Regenerate unique key
}
</script>
```

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

### Function Usage for Target Container

Source: https://github.com/alfred-skyblue/vue-draggable-plus/blob/main/src/__docs__/target-container/index.en-US.md

Illustrates using a function to specify the target container, ensuring it can be obtained by adding an ID 'my-container' to the parent div. This method is suitable when the target container might not be directly accessible.

```vue
<template>
  <div id="my-container">
    <ElTable :list="list"></ElTable>
  </div>
  <div class="flex justify-between">
    <pre class="code-block">{{ text }}</pre>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import ElTable from './ElTable.vue'

const list = ref([
  { id: '1', name: 'John' },
  { id: '2', name: 'Doe' },
  { id: '3', name: 'Jane' },
])
</script>
<script>
import { defineComponent } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'

export default defineComponent({
  name: 'App',
  components: {
    VueDraggable,
    ElTable,
  },
  directives: {
    drag: {
      mounted(el, binding) {
        new VueDraggable(el, {
          group: 'elTable',
          animation: 150,
          // Specify the target container using a function
          target: () => document.getElementById('my-container'),
        })
      },
    },
  },
  setup() {
    return {
      list: [
        { id: '1', name: 'John' },
        { id: '2', name: 'Doe' },
        { id: '3', name: 'Jane' },
      ],
      text: 'This is the text',
    }
  },
})
</script>
```

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

### Clone using Components

Source: https://github.com/alfred-skyblue/vue-draggable-plus/blob/main/src/__docs__/clone/index.en-US.md

Use the `pull.clone` attribute within the `group` configuration to enable cloning when using components. Ensure the `pull` attribute is set to `clone` for this functionality.

```vue
<template>
  <div class="box">
    <draggable
      :list="list1"
      group="my-group"
      item-key="id"
      animation="300"
      class="list-group"
    >
      <template #item="{ element }">
        <div class="list-group-item">
          <i class="el-icon-menu"></i>
          {{ element.name }}
        </div>
      </template>
    </draggable>
    <draggable
      :list="list2"
      group="my-group"
      item-key="id"
      animation="300"
      class="list-group"
      :pull="'clone'"
    >
      <template #item="{ element }">
        <div class="list-group-item">
          <i class="el-icon-menu"></i>
          {{ element.name }}
        </div>
      </template>
    </draggable>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import draggable from './../../src/vuedraggable'

const list1 = ref([
  { id: 1, name: 'item 1' },
  { id: 2, name: 'item 2' },
  { id: 3, name: 'item 3' },
  { id: 4, name: 'item 4' },
])
const list2 = ref([
  { id: 5, name: 'item 5' },
  { id: 6, name: 'item 6' },
  { id: 7, name: 'item 7' },
  { id: 8, name: 'item 8' },
])
</script>

<style scoped>
.list-group {
  min-height: 20px;
  width: 100%;
  background-color: #fefefe;
  border: 1px solid #eee;
  margin-bottom: 10px;
  padding: 5px;
}
.list-group-item {
  cursor: move;
  padding: 5px 10px;
  background-color: #fefefe;
  border: 1px solid #eee;
  margin-bottom: 5px;
  border-radius: 3px;
}
.list-group-item:hover {
  background-color: #f0f0f0;
}
.list-group-item i {
  margin-right: 10px;
}
.box {
  display: flex;
  justify-content: space-around;
}
</style>

```

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

### Clone using Directive

Source: https://github.com/alfred-skyblue/vue-draggable-plus/blob/main/src/__docs__/clone/index.en-US.md

Implement cloning functionality using directives by passing options to the `clone` attribute. This method requires the `pull` attribute in the `group` to be set to `clone`.

```vue
<template>
  <div class="box">
    <div v-for="list in lists" :key="list.id" class="list-box">
      <draggable
        :list="list.items"
        group="my-group"
        item-key="id"
        animation="300"
        class="list-group"
        :pull="list.pull"
        :clone="clone"
      >
        <template #item="{ element }">
          <div class="list-group-item">
            <i class="el-icon-menu"></i>
            {{ element.name }}
          </div>
        </template>
      </draggable>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import draggable from './../../src/vuedraggable'

const lists = ref([
  {
    id: 1,
    pull: true,
    items: [
      { id: 1, name: 'item 1' },
      { id: 2, name: 'item 2' },
      { id: 3, name: 'item 3' },
      { id: 4, name: 'item 4' },
    ],
  },
  {
    id: 2,
    pull: 'clone',
    items: [
      { id: 5, name: 'item 5' },
      { id: 6, name: 'item 6' },
      { id: 7, name: 'item 7' },
      { id: 8, name: 'item 8' },
    ],
  },
])

const clone = (el: any) => {
  return {
    name: el.name + ", cloned",
    id: Math.random() * 1000000000000000000,
  }
}
</script>

<style scoped>
.list-group {
  min-height: 20px;
  width: 100%;
  background-color: #fefefe;
  border: 1px solid #eee;
  margin-bottom: 10px;
  padding: 5px;
}
.list-group-item {
  cursor: move;
  padding: 5px 10px;
  background-color: #fefefe;
  border: 1px solid #eee;
  margin-bottom: 5px;
  border-radius: 3px;
}
.list-group-item:hover {
  background-color: #f0f0f0;
}
.list-group-item i {
  margin-right: 10px;
}
.box {
  display: flex;
  justify-content: space-around;
}
.list-box {
  width: 45%;
}
</style>

```

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

### Event Handlers

Source: https://github.com/alfred-skyblue/vue-draggable-plus/blob/main/README.md

These events are triggered by various user interactions during the drag-and-drop process, allowing for custom logic execution.

```APIDOC
## Event Handlers

| Event Name | Description                                                              | Type                               | 
|------------|--------------------------------------------------------------------------|------------------------------------|
| `onChoose` | Triggered when an item is selected                                       | `((event: SortableEvent) => void)` |
| `onUnchoose` | Triggered when an item is deselected                                     | `((event: SortableEvent) => void)` |
| `onStart` | Triggered when an item is picked up for drag and drop                      | `((event: SortableEvent) => void)` |
| `onEnd` | Triggered when an item is no longer being dragged                        | `((event: SortableEvent) => void)` |
| `onAdd` | Triggered when an item is moved from one list to another                 | `((event: SortableEvent) => void)` |
| `onUpdate` | Triggered when the order of the items is updated                         | `((event: SortableEvent) => void)` |
| `onSort` | Triggered whenever any changes are made to the list                      | `((event: SortableEvent) => void)` |
| `onRemove` | Triggered when an item is removed from the list and moved to another     | `((event: SortableEvent) => void)` |
| `onFilter` | Triggered when trying to drag a filtered item                            | `((event: SortableEvent) => void)` |
| `onMove` | Triggered while an item is being dragged                                 | `((event: MoveEvent,originalEvent: Event) => void)` |
| `onClone` | Triggered when an item is cloned                                         | `((event: SortableEvent) => void)` |
| `onChange` | Triggered when an item is dragged and changes position                   | `((event: SortableEvent) => void)` |
```

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

### Cloning using Function

Source: https://github.com/alfred-skyblue/vue-draggable-plus/blob/main/src/__docs__/clone/index.en-US.md

Achieve cloning by passing a custom function to the `clone` attribute. This allows for more control over the cloning process. Ensure the `pull` attribute in the `group` is set to `clone`.

```vue
<template>
  <div class="box">
    <draggable
      :list="list1"
      group="my-group"
      item-key="id"
      animation="300"
      class="list-group"
    >
      <template #item="{ element }">
        <div class="list-group-item">
          <i class="el-icon-menu"></i>
          {{ element.name }}
        </div>
      </template>
    </draggable>
    <draggable
      :list="list2"
      group="my-group"
      item-key="id"
      animation="300"
      class="list-group"
      :pull="'clone'"
      :clone="clone"
    >
      <template #item="{ element }">
        <div class="list-group-item">
          <i class="el-icon-menu"></i>
          {{ element.name }}
        </div>
      </template>
    </draggable>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import draggable from './../../src/vuedraggable'

const list1 = ref([
  { id: 1, name: 'item 1' },
  { id: 2, name: 'item 2' },
  { id: 3, name: 'item 3' },
  { id: 4, name: 'item 4' },
])
const list2 = ref([
  { id: 5, name: 'item 5' },
  { id: 6, name: 'item 6' },
  { id: 7, name: 'item 7' },
  { id: 8, name: 'item 8' },
])

const clone = (el: any) => {
  return {
    name: el.name + ", cloned",
    id: Math.random() * 1000000000000000000,
  }
}
</script>

<style scoped>
.list-group {
  min-height: 20px;
  width: 100%;
  background-color: #fefefe;
  border: 1px solid #eee;
  margin-bottom: 10px;
  padding: 5px;
}
.list-group-item {
  cursor: move;
  padding: 5px 10px;
  background-color: #fefefe;
  border: 1px solid #eee;
  margin-bottom: 5px;
  border-radius: 3px;
}
.list-group-item:hover {
  background-color: #f0f0f0;
}
.list-group-item i {
  margin-right: 10px;
}
.box {
  display: flex;
  justify-content: space-around;
}
</style>

```

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

### Cloning using function

Source: https://github.com/alfred-skyblue/vue-draggable-plus/blob/main/src/__docs__/custom-clone/index.en-US.md

Use a function passed to the `clone` attribute to achieve custom cloning logic. This function receives the item to be cloned and should return the cloned item, ensuring a unique key is regenerated.

```vue
<template>
  <draggable
    :list="list"
    group="my-group"
    item-key="id"
    :clone="clone"
  >
    <template #item="{ element }">
      <div>{{ element.name }}</div>
    </template>
  </draggable>
</template>

<script lang="ts" setup>
import draggable from 'vue-draggable-plus'

const list = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
]

const clone = (item) => {
  // Example: Use lodash for deep cloning if needed
  // return _.cloneDeep(item)
  return { ...item, id: Date.now() } // Regenerate unique key
}
</script>
```

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

### Integrating VueDraggable with TransitionGroup for Animations

Source: https://context7.com/alfred-skyblue/vue-draggable-plus/llms.txt

Combine `VueDraggable` with Vue's `<TransitionGroup>` component to achieve CSS enter/leave animations for items added or removed, alongside smooth drag reordering. Point the `target` prop to the `TransitionGroup`'s rendered element.

```vue
<template>
  <VueDraggable v-model="list" target=".fade-list" :scroll="true" :animation="150">
    <TransitionGroup tag="ul" name="fade" class="fade-list">
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </TransitionGroup>
  </VueDraggable>
  <button @click="addItem">Add Item</button>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'

const list = ref([
  { id: '1', name: 'Joao' },
  { id: '2', name: 'Jean' },
])

let counter = 3
function addItem() {
  list.value.push({ id: String(counter), name: `Item ${counter++}` })
}
</script>

<style>
.fade-move,
.fade-enter-active,
.fade-leave-active { transition: all 0.4s ease; }
.fade-enter-from,
.fade-leave-to    { opacity: 0; transform: translateX(30px); }
.fade-leave-active { position: absolute; }
</style>
```

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

### DraggableEvent — Enhanced Sortable Event

Source: https://context7.com/alfred-skyblue/vue-draggable-plus/llms.txt

Every event callback receives a `DraggableEvent<T>` that extends the native `SortableEvent` with two extra properties: `data` (the reactive data item that was dragged) and `clonedData` (the clone used for cross-list moves).

```APIDOC
## `DraggableEvent` — Enhanced Sortable Event

Every event callback receives a `DraggableEvent<T>` that extends the native `SortableEvent` with two extra properties: `data` (the reactive data item that was dragged) and `clonedData` (the clone used for cross-list moves).

### Event Properties

- **data** (T) - The reactive data item that was dragged.
- **clonedData** - The clone used for cross-list moves.
- **newIndex** (number) - Index in the destination list (standard SortableEvent).
```

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

### Group Type

Source: https://github.com/alfred-skyblue/vue-draggable-plus/blob/main/README.md

Defines the type for group configuration, which can be a string name or a GroupOptions object.

```APIDOC
## Type: Group

```ts
type Group = string | GroupOptions | undefined;
```
```

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

### useDraggable Options Type

Source: https://github.com/alfred-skyblue/vue-draggable-plus/blob/main/src/__docs__/api/index.en-US.md

Defines the options available for the `useDraggable` composable, including custom cloning behavior, immediate execution, and custom update callbacks.

```APIDOC
## `useDraggable` Options

### Description
This interface defines the optional configuration parameters for the `useDraggable` composable, extending the base `Options` from Sortablejs.

### Type Definition
```typescript
export interface UseDraggableOptions<T> extends Options {
  clone?: (element: T) => T
  immediate?: boolean
  customUpdate?: (event: DraggableEvent) => void
}
```

### Properties
- `clone`: A function to customize the cloning of elements during drag operations.
- `immediate`: A boolean flag to determine if dragging should start immediately.
- `customUpdate`: A callback function to handle custom update logic during drag events.
```

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

### Sortablejs Options - Group

Source: https://github.com/alfred-skyblue/vue-draggable-plus/blob/main/src/__docs__/api/index.en-US.md

Details the `GroupOptions` interface for configuring group behavior in Sortablejs, including name, pull, and put properties for managing interactions between lists.

```APIDOC
## Sortablejs Options - `GroupOptions`

### Description
This interface defines the configuration for grouping sortable lists, allowing control over how items can be moved between different lists.

### Type Definition
```typescript
interface GroupOptions {
  /**
   * Group name.
   */
  name: string;
  /**
   * The ability to move from the list. Clone - copy the item instead of moving it.
   */
  pull?: PullResult | ((to: Sortable, from: Sortable, dragEl: HTMLElement, event: SortableEvent) => PullResult) | undefined;
  /**
   * Whether elements can be added from other lists, or an array of group names from which elements can be obtained.
   */
  put?: PutResult | ((to: Sortable, from: Sortable, dragEl: HTMLElement, event: SortableEvent) => PutResult) | undefined;
  /**
   * After moving to another list, the cloned element is restored to its initial position.
   */
  revertClone?: boolean | undefined;
}

type Group = string | GroupOptions | undefined;
```

### Properties
- `name`: The name of the group.
- `pull`: Determines if and how items can be moved out of the list (e.g., `true`, `false`, `'clone'`). Can also be a function for custom logic.
- `put`: Determines if and from which groups items can be added to this list. Can be `true`, `false`, an array of group names, or a function for custom logic.
- `revertClone`: If `true`, the cloned element returns to its original position after being moved to another list.
```

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

### Cloning Items Between Lists

Source: https://context7.com/alfred-skyblue/vue-draggable-plus/llms.txt

Configure a list to clone items instead of moving them by setting `group.pull: 'clone'`. Use the `clone` option with a factory function to generate new item data, ensuring unique IDs for cloned elements.

```vue
<template>
  <div style="display:flex; gap:1rem;">
    <!-- Source: clone-only, no sort -->
    <VueDraggable
      v-model="palette"
      :group="{ name: 'canvas', pull: 'clone', put: false }"
      :clone="cloneItem"
      :sort="false"
      :animation="150"
    >
      <div v-for="item in palette" :key="item.id">{{ item.label }}</div>
    </VueDraggable>

    <!-- Target: accept clones -->
    <VueDraggable
      v-model="canvas"
      group="canvas"
      :animation="150"
    >
      <div v-for="item in canvas" :key="item.id">{{ item.label }}</div>
    </VueDraggable>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'

interface Item { id: string; label: string }

const palette = ref<Item[]>([
  { id: 'btn',   label: 'Button' },
  { id: 'input', label: 'Input' },
  { id: 'img',   label: 'Image' },
])
const canvas = ref<Item[]>([])

let counter = 0
function cloneItem(item: Item): Item {
  return { id: `${item.id}-${++counter}`, label: `${item.label} (copy)` }
}
</script>
```

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

### Drag Handle for Specific Elements

Source: https://context7.com/alfred-skyblue/vue-draggable-plus/llms.txt

Limit drag initiation to specific child elements by providing a CSS selector to the `handle` option. This allows other parts of the item, like input fields, to remain interactive.

```vue
<template>
  <VueDraggable v-model="list" handle=".drag-handle" :animation="150">
    <div v-for="(item, i) in list" :key="item.id" class="row">
      <span class="drag-handle">☰</span>
      <input v-model="item.name" />
      <button @click="list.splice(i, 1)">✕</button>
    </div>
  </VueDraggable>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'

const list = ref([
  { id: '1', name: 'Joao' },
  { id: '2', name: 'Jean' },
  { id: '3', name: 'Johanna' },
])
</script>

<style>
.drag-handle { cursor: move; }
</style>
```