### Install vuedraggable via npm

Source: https://github.com/sortablejs/vue.draggable/blob/master/documentation/Vue.draggable.for.ReadME.md

Install the vuedraggable package using npm for use in your project.

```js
npm install vuedraggable
```

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

### Install Vue.Draggable via Package Manager

Source: https://github.com/sortablejs/vue.draggable/blob/master/README.md

Use npm or yarn to add the library to your project.

```bash
yarn add vuedraggable

npm i -S vuedraggable
```

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

### Install vue.draggable via Bower

Source: https://github.com/sortablejs/vue.draggable/blob/master/documentation/Vue.draggable.for.ReadME.md

Install the vue.draggable package using Bower for use in your project.

```js
Bower install vue.draggable
```

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

### Vue.Draggable Component Data Method Example

Source: https://github.com/sortablejs/vue.draggable/blob/master/README.md

Provides a JavaScript example for the 'getComponentData' method, showing how to define 'on' event handlers, 'attrs', and 'props' for the child component used with Vue.Draggable.

```javascript
methods: {
    handleChange() {
      console.log('changed');
    },
    inputChanged(value) {
      this.activeNames = value;
    },
    getComponentData() {
      return {
        on: {
          change: this.handleChange,
          input: this.inputChanged
        },
        attrs:{
          wrap: true
        },
        props: {
          value: this.activeNames
        }
      };
    }
  }
```

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

### Vue Component with Sortable.js Options

Source: https://context7.com/sortablejs/vue.draggable/llms.txt

This example demonstrates how to use the Vue.Draggable component, passing various Sortable.js options as props and defining event handlers for drag-and-drop actions.

```vue
<template>
  <draggable
    v-model="list"
    handle=".handle"
    :group="{ name: 'people', pull: 'clone', put: false }"
    ghost-class="ghost"
    chosen-class="chosen"
    drag-class="drag"
    :sort="true"
    :animation="200"
    :disabled="false"
    :swap-threshold="0.65"
    :invert-swap="false"
    :direction="'vertical'"
    @change="onChange"
    @start="onStart"
    @end="onEnd"
    @add="onAdd"
    @remove="onRemove"
    @update="onUpdate"
    @choose="onChoose"
    @unchoose="onUnchoose"
    @sort="onSort"
    @filter="onFilter"
    @clone="onClone"
  >
    <div v-for="element in list" :key="element.id">
      <span class="handle">☰</span>
      {{ element.name }}
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      list: [
        { name: "John", id: 1 },
        { name: "Jane", id: 2 },
        { name: "Joe", id: 3 }
      ]
    }
  },
  methods: {
    onChange(evt) {
      console.log('change', evt)
      // { added: { element, newIndex } } when item added
      // { removed: { element, oldIndex } } when item removed
      // { moved: { element, oldIndex, newIndex } } when item moved
    },
    onStart(evt) {
      console.log('drag started', evt)
    },
    onEnd(evt) {
      console.log('drag ended', evt)
    },
    onAdd(evt) {
      console.log('item added', evt)
    },
    onRemove(evt) {
      console.log('item removed', evt)
    },
    onUpdate(evt) {
      console.log('item updated within list', evt)
    },
    onChoose(evt) {
      console.log('item chosen', evt)
    },
    onUnchoose(evt) {
      console.log('item unchosen', evt)
    },
    onSort(evt) {
      console.log('item sorted', evt)
    },
    onFilter(evt) {
      console.log('filter triggered', evt)
    },
    onClone(evt) {
      console.log('item cloned', evt)
    }
  }
}
</script>

<style>
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.chosen {
  background: #f0f0f0;
}
.drag {
  opacity: 0.8;
}
.handle {
  cursor: move;
  margin-right: 10px;
}
</style>
```

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

### Configuring Child Component Data with Vue.Draggable

Source: https://github.com/sortablejs/vue.draggable/blob/master/README.md

Demonstrates how to use the 'componentData' prop to pass props, attributes, and event listeners to a child component rendered by Vue.Draggable, using the Element UI library as an example.

```html
<draggable tag="el-collapse" :list="list" :component-data="getComponentData()">
    <el-collapse-item v-for="e in list" :title="e.title" :name="e.name" :key="e.name">
        <div>{{e.description}}</div>
     </el-collapse-item>
</draggable>
```

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

### Implementing a Custom Move Callback in Vue.Draggable

Source: https://github.com/sortablejs/vue.draggable/blob/master/README.md

Provides an example of a JavaScript function to be used with the 'move' prop. This function can prevent certain drag operations, such as dragging an element named 'apple'.

```javascript
function onMoveCallback(evt, originalEvent){
   ...
    // return false; — for cancel
}
```

```javascript
checkMove: function(evt){
    return (evt.draggedContext.element.name!=='apple');
}
```

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

### Set Drag Handle with Options Prop

Source: https://github.com/sortablejs/vue.draggable/blob/master/documentation/legacy.options.md

Use the `options` prop to configure SortableJS features like specifying a drag handle. This example binds the options object to set '.handle' as the drag handle.

```html
<script setup lang="ts">
import { ref } from 'vue'
import draggable from 'vuedraggable'

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

<template>
  <draggable
    :list="list"
    item-key="id"
    :options="{ handle: '.handle', animation: 200 }"
    class="list-group"
    @change="log"
  >
    <template #item="{ element }">
      <div class="list-group-item">
        <span class="handle">::</span> {{ element.name }}
      </div>
    </template>
  </draggable>
</template>

<style>
.list-group-item {
  cursor: move;
}
</style>
```

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

### Create a Basic Draggable List

Source: https://context7.com/sortablejs/vue.draggable/llms.txt

Implement a sortable list with v-model binding and event handling for drag state.

```vue
<template>
  <div>
    <h3>Draggable {{ dragging ? 'under drag' : '' }}</h3>

    <draggable
      :list="list"
      :disabled="!enabled"
      class="list-group"
      ghost-class="ghost"
      :move="checkMove"
      @start="dragging = true"
      @end="dragging = false"
    >
      <div
        class="list-group-item"
        v-for="element in list"
        :key="element.name"
      >
        {{ element.name }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      enabled: true,
      list: [
        { name: "John", id: 0 },
        { name: "Joao", id: 1 },
        { name: "Jean", id: 2 }
      ],
      dragging: false
    }
  },
  methods: {
    checkMove(e) {
      console.log("Future index: " + e.draggedContext.futureIndex);
    }
  }
}
</script>

<style>
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
</style>
```

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

### Include Vue.Draggable via CDN

Source: https://github.com/sortablejs/vue.draggable/blob/master/README.md

Load Vue, Sortable.js, and Vue.Draggable directly in the browser.

```html
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
```

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

### options prop

Source: https://github.com/sortablejs/vue.draggable/blob/master/documentation/legacy.options.md

Configuration prop for initializing the underlying Sortable object.

```APIDOC
## options (prop)

### Description
Used to initialize the sortable object. Note that all methods starting with "on" are ignored as the component exposes the same API via events.

### Parameters
#### Request Body
- **options** (Object) - Optional - Configuration object for SortableJS. See [Sortable options documentation](https://github.com/RubaXa/Sortable#options).

### Request Example
<draggable :options="{handle:'.handle'}">
```

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

### Implement Basic Draggable Component

Source: https://github.com/sortablejs/vue.draggable/blob/master/README.md

Bind a list to the draggable component and register it in the Vue instance.

```html
<draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
   <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>
```

```js
  import draggable from 'vuedraggable'
  ...
  export default {
        components: {
            draggable,
        },
  ...
```

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

### Include Vue.Draggable via CDN

Source: https://context7.com/sortablejs/vue.draggable/llms.txt

Load the required scripts in your HTML file to use the component without a build system.

```html
<!-- Using CDN -->
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
```

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

### Configuring Vue.Draggable with Sortable Options

Source: https://github.com/sortablejs/vue.draggable/blob/master/README.md

Shows how to set Sortable.js options like 'handle', 'group', 'ghost-class', and 'sort' directly as props on the Vue.Draggable component. The 'change' event is also logged.

```html
<draggable
        v-model="list"
        handle=".handle"
        :group="{ name: 'people', pull: 'clone', put: false }"
        ghost-class="ghost"
        :sort="false"
        @change="log"
      >
      <!-- -->
</draggable>
```

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

### Add Footer and Header Slots

Source: https://github.com/sortablejs/vue.draggable/blob/master/README.md

Include static elements at the beginning or end of the draggable list using slots.

```html
<draggable v-model="myArray" draggable=".item">
    <div v-for="element in myArray" :key="element.id" class="item">
        {{element.name}}
    </div>
    <button slot="footer" @click="addPeople">Add</button>
</draggable>
```

```html
<draggable v-model="myArray" draggable=".item">
    <div v-for="element in myArray" :key="element.id" class="item">
        {{element.name}}
    </div>
    <button slot="header" @click="addPeople">Add</button>
</draggable>
```

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

### Using v-model with Vue.Draggable

Source: https://github.com/sortablejs/vue.draggable/blob/master/README.md

Demonstrates the preferred way to bind an array to the draggable component using the v-model directive for Vuex compatibility.

```html
<draggable v-model="myArray">
```
```

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

### Vue.js 1.0 Module Import (ES5)

Source: https://github.com/sortablejs/vue.draggable/blob/master/documentation/Vue.draggable.for.ReadME.md

Import and use vuedraggable for Vue.js 1.0 projects using ES5 module syntax.

```js
// ES5 
//For Vue.js 1.0
var Vue = require('vue')
Vue.use(require('vuedraggable'))
```

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

### Vue.js 1.0 Module Import (ES6)

Source: https://github.com/sortablejs/vue.draggable/blob/master/documentation/Vue.draggable.for.ReadME.md

Import and use VueDraggable for Vue.js 1.0 projects using ES6 module syntax.

```js
// ES6  
//For Vue.js 1.0 only
import VueDraggable from 'vuedraggable'
import Vue from 'vue'
Vue.use(VueDraggable)
```

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

### Migrate dynamic `options` prop to `v-bind` in Vue.draggable

Source: https://github.com/sortablejs/vue.draggable/blob/master/documentation/migrate.md

When using a function to provide Sortable.js options, migrate from the deprecated `options` prop to `v-bind` for direct prop binding. This ensures options are correctly passed to the Sortable instance.

```html
<draggable v-for="list" :options="getOptions()">
   <!-- -->
</draggable>
```

```html
<draggable v-for="list" v-bind="getOptions()">
   <!-- -->
</draggable>
```

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

### Using the 'move' Prop with Vue.Draggable

Source: https://github.com/sortablejs/vue.draggable/blob/master/README.md

Illustrates how to bind a JavaScript method to the 'move' prop in the Vue.Draggable component to control drag-and-drop behavior.

```html
<draggable :list="list" :move="checkMove">
```
```

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

### Integrate Draggable with Vuex

Source: https://github.com/sortablejs/vue.draggable/blob/master/README.md

Use a computed property with getter and setter to sync the draggable list with a Vuex store.

```html
<draggable v-model='myList'>
```

```javascript
computed: {
    myList: {
        get() {
            return this.$store.state.myList
        },
        set(value) {
            this.$store.commit('updateList', value)
        }
    }
}
```

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

### Use Draggable with Transition Group

Source: https://github.com/sortablejs/vue.draggable/blob/master/README.md

Wrap draggable elements in a transition-group for animated reordering.

```html
<draggable v-model="myArray">
    <transition-group>
        <div v-for="element in myArray" :key="element.id">
            {{element.name}}
        </div>
    </transition-group>
</draggable>
```

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

### Vue.Draggable Component Props

Source: https://github.com/sortablejs/vue.draggable/blob/master/README.md

Overview of the primary props used to configure the draggable component, including data binding, cloning, and movement logic.

```APIDOC
## Vue.Draggable Props

### Description
Configuration props for the Vue.Draggable component to handle data synchronization and drag-and-drop behavior.

### Parameters
#### Props
- **value** (Array) - Optional - Input array for the component, compatible with Vuex. Use with v-model.
- **list** (Array) - Optional - Alternative to value; synchronized via splice. Do not use with value.
- **tag** (String) - Optional - HTML node type or component name for the outer element. Default: 'div'.
- **clone** (Function) - Optional - Function to clone elements when clone option is true. Default: (original) => { return original;}.
- **move** (Function) - Optional - Callback function to validate drag operations. Return false to cancel.
- **componentData** (Object) - Optional - Object to pass props, attrs, and events to the child component defined by the tag prop.
```

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

### Custom Clone Function

Source: https://context7.com/sortablejs/vue.draggable/llms.txt

Uses the :clone prop to provide a function that transforms data objects during the drag-and-drop process.

```vue
<template>
  <div class="row">
    <div class="col-6">
      <h3>Source Dogs</h3>
      <draggable
        class="dragArea list-group"
        :list="list1"
        :group="{ name: 'people', pull: 'clone', put: false }"
        :clone="cloneDog"
        @change="log"
      >
        <div class="list-group-item" v-for="element in list1" :key="element.id">
          {{ element.name }}
        </div>
      </draggable>
    </div>

    <div class="col-6">
      <h3>Target Cats</h3>
      <draggable
        class="dragArea list-group"
        :list="list2"
        group="people"
        @change="log"
      >
        <div class="list-group-item" v-for="element in list2" :key="element.id">
          {{ element.name }}
        </div>
      </draggable>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

let idGlobal = 8

export default {
  components: { draggable },
  data() {
    return {
      list1: [
        { name: "dog 1", id: 1 },
        { name: "dog 2", id: 2 },
        { name: "dog 3", id: 3 },
        { name: "dog 4", id: 4 }
      ],
      list2: [
        { name: "cat 5", id: 5 },
        { name: "cat 6", id: 6 },
        { name: "cat 7", id: 7 }
      ]
    }
  },
  methods: {
    log(evt) {
      console.log(evt)
    },
    cloneDog({ id }) {
      // Transform dog to cat with new unique ID
      return {
        id: idGlobal++,
        name: `cat ${id}`
      }
    }
  }
}
</script>
```

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

### Clone Elements Between Lists

Source: https://context7.com/sortablejs/vue.draggable/llms.txt

Configures a source list to clone items into a target list by setting the pull property to 'clone' and disabling put on the source.

```vue
<template>
  <div class="row">
    <div class="col-6">
      <h3>Source (Clone Only)</h3>
      <draggable
        class="dragArea list-group"
        :list="list1"
        :group="{ name: 'people', pull: 'clone', put: false }"
        @change="log"
      >
        <div
          class="list-group-item"
          v-for="element in list1"
          :key="element.name"
        >
          {{ element.name }}
        </div>
      </draggable>
    </div>

    <div class="col-6">
      <h3>Target</h3>
      <draggable
        class="dragArea list-group"
        :list="list2"
        group="people"
        @change="log"
      >
        <div
          class="list-group-item"
          v-for="element in list2"
          :key="element.name"
        >
          {{ element.name }}
        </div>
      </draggable>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      list1: [
        { name: "dog 1", id: 1 },
        { name: "dog 2", id: 2 },
        { name: "dog 3", id: 3 }
      ],
      list2: [
        { name: "cat 5", id: 5 },
        { name: "cat 6", id: 6 }
      ]
    }
  },
  methods: {
    log(evt) {
      console.log(evt)
    }
  }
}
</script>
```

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

### Vue.Draggable Events

Source: https://github.com/sortablejs/vue.draggable/blob/master/README.md

Overview of supported Sortable.js events and the custom change event triggered by Vue.Draggable.

```APIDOC
## Vue.Draggable Events

### Description
Vue.Draggable supports standard Sortable.js events and provides a custom 'change' event for tracking array modifications.

### Events
- **Sortable Events**: start, add, remove, update, end, choose, unchoose, sort, filter, clone.
- **change**: Triggered when the list prop is altered due to a drag-and-drop operation.

### Change Event Payload
- **added** (object) - Information about an added element: newIndex, element.
- **removed** (object) - Information about a removed element: oldIndex, element.
- **moved** (object) - Information about a moved element: newIndex, oldIndex, element.
```

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

### Drag Handle

Source: https://context7.com/sortablejs/vue.draggable/llms.txt

Restricts drag initiation to elements matching the CSS selector provided in the handle prop.

```vue
<template>
  <div>
    <button class="btn btn-secondary" @click="add">Add</button>

    <draggable tag="ul" :list="list" class="list-group" handle=".handle">
      <li
        class="list-group-item"
        v-for="(element, idx) in list"
        :key="element.name"
      >
        <i class="fa fa-align-justify handle"></i>
        <span class="text">{{ element.name }}</span>
        <input type="text" class="form-control" v-model="element.text" />
        <i class="fa fa-times close" @click="removeAt(idx)"></i>
      </li>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

let id = 3

export default {
  components: { draggable },
  data() {
    return {
      list: [
        { name: "John", text: "", id: 0 },
        { name: "Joao", text: "", id: 1 },
        { name: "Jean", text: "", id: 2 }
      ]
    }
  },
  methods: {
    removeAt(idx) {
      this.list.splice(idx, 1)
    },
    add() {
      id++
      this.list.push({ name: "Juan " + id, id, text: "" })
    }
  }
}
</script>

<style>
.handle {
  float: left;
  padding-top: 8px;
  padding-bottom: 8px;
  cursor: move;
}
</style>
```

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

### Watching ViewModel Collection for Updates

Source: https://github.com/sortablejs/vue.draggable/blob/master/documentation/Vue.draggable.for.ReadME.md

Since Sortable.js hooks like onStart, onUpdate, onAdd, and onRemove are used internally by v-dragable-for, they cannot be directly used. To listen for re-order events, watch the underlying view model collection.

```js
watch: {
    'list1': function () {
        console.log('Collection updated!');
    },
}
```

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

### Integrate Vue.Draggable with Vuex

Source: https://context7.com/sortablejs/vue.draggable/llms.txt

Use computed properties with getters and setters to bind the draggable list to Vuex state.

```vue
<template>
  <draggable v-model="myList">
    <div v-for="element in myList" :key="element.id">
      {{ element.name }}
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  computed: {
    myList: {
      get() {
        return this.$store.state.myList
      },
      set(value) {
        this.$store.commit('updateList', value)
      }
    }
  }
}
</script>
```

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

### Vue Draggable with Transition Animations

Source: https://context7.com/sortablejs/vue.draggable/llms.txt

Integrates Vue.Draggable with Vue's TransitionGroup for animated drag-and-drop operations. Ensure Vue's transition-group and CSS transitions are correctly configured for smooth animations.

```vue
<template>
  <div>
    <button class="btn btn-secondary" @click="sort">
      To original order
    </button>

    <draggable
      class="list-group"
      tag="ul"
      v-model="list"
      v-bind="dragOptions"
      @start="isDragging = true"
      @end="isDragging = false"
    >
      <transition-group type="transition" name="flip-list">
        <li
          class="list-group-item"
          v-for="element in list"
          :key="element.order"
        >
          <i
            :class="element.fixed ? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'"
            @click="element.fixed = !element.fixed"
          ></i>
          {{ element.name }}
        </li>
      </transition-group>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

const message = [
  "vue.draggable",
  "draggable",
  "component",
  "for",
  "vue.js 2.0",
  "based",
  "on",
  "Sortablejs"
]

export default {
  components: { draggable },
  data() {
    return {
      list: message.map((name, index) => {
        return { name, order: index + 1 }
      })
    }
  },
  methods: {
    sort() {
      this.list = this.list.sort((a, b) => a.order - b.order)
    }
  },
  computed: {
    dragOptions() {
      return {
        animation: 0,
        group: "description",
        disabled: false,
        ghostClass: "ghost"
      }
    }
  }
}
</script>

<style>
.flip-list-move {
  transition: transform 0.5s;
}
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.list-group-item {
  cursor: move;
}
</style>
```

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

### Control Dragging with Move Callback

Source: https://context7.com/sortablejs/vue.draggable/llms.txt

Define a move function to conditionally allow or block drag operations based on the dragged element's context.

```vue
<template>
  <draggable :list="list" :move="checkMove">
    <div v-for="element in list" :key="element.id">
      {{ element.name }}
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      list: [
        { name: "apple", id: 1 },
        { name: "banana", id: 2 },
        { name: "orange", id: 3 }
      ]
    }
  },
  methods: {
    checkMove(evt) {
      // evt.draggedContext contains:
      //   index: dragged element index
      //   element: dragged element data
      //   futureIndex: potential drop index

      // evt.relatedContext contains:
      //   index: target element index
      //   element: target element data
      //   list: target list array
      //   component: target Vue component

      // Return false to cancel the drag operation
      // Prevent dragging 'apple'
      return evt.draggedContext.element.name !== 'apple'
    }
  }
}
</script>
```

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

### Implement Header and Footer Slots in Vue.Draggable

Source: https://context7.com/sortablejs/vue.draggable/llms.txt

Use the slot attribute to define non-draggable elements that persist at the beginning or end of the draggable list.

```vue
<template>
  <div>
    <h3>Draggable with footer</h3>

    <draggable
      tag="transition-group"
      :componentData="componentData"
      :list="list"
      class="list-group"
      draggable=".item"
      :animation="100"
      @start="dragging = true"
      @end="dragging = false"
    >
      <div
        class="list-group-item item"
        v-for="element in list"
        :key="element.name"
      >
        {{ element.name }}
      </div>

      <div
        slot="footer"
        class="btn-group list-group-item"
        role="group"
        key="footer"
      >
        <button class="btn btn-secondary" @click="add">Add</button>
        <button class="btn btn-secondary" @click="replace">Replace</button>
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

let id = 1

export default {
  components: { draggable },
  data() {
    return {
      list: [
        { name: "John", id: 0 },
        { name: "Joao", id: 1 },
        { name: "Jean", id: 2 }
      ],
      dragging: false,
      componentData: {
        props: {
          type: "transition",
          name: "flip-list"
        }
      }
    }
  },
  methods: {
    add() {
      this.list.push({ name: "Juan " + id, id: id++ })
    },
    replace() {
      this.list = [{ name: "Edgard", id: id++ }]
    }
  }
}
</script>

<style>
.flip-list-move {
  transition: transform 0.5s;
}
</style>
```

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

### Enable Drag-and-Drop Between Two Lists

Source: https://context7.com/sortablejs/vue.draggable/llms.txt

Assign the same group name to multiple draggable components to allow items to be moved between them.

```vue
<template>
  <div class="row">
    <div class="col-6">
      <h3>Draggable 1</h3>
      <draggable
        class="list-group"
        :list="list1"
        group="people"
        @change="log"
      >
        <div
          class="list-group-item"
          v-for="(element, index) in list1"
          :key="element.name"
        >
          {{ element.name }} {{ index }}
        </div>
      </draggable>
    </div>

    <div class="col-6">
      <h3>Draggable 2</h3>
      <draggable
        class="list-group"
        :list="list2"
        group="people"
        @change="log"
      >
        <div
          class="list-group-item"
          v-for="(element, index) in list2"
          :key="element.name"
        >
          {{ element.name }} {{ index }}
        </div>
      </draggable>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      list1: [
        { name: "John", id: 1 },
        { name: "Joao", id: 2 },
        { name: "Jean", id: 3 },
        { name: "Gerard", id: 4 }
      ],
      list2: [
        { name: "Juan", id: 5 },
        { name: "Edgard", id: 6 },
        { name: "Johnson", id: 7 }
      ]
    }
  },
  methods: {
    log(evt) {
      // evt contains: added, removed, or moved property
      // added: { element, newIndex }
      // removed: { element, oldIndex }
      // moved: { element, newIndex, oldIndex }
      console.log(evt)
    }
  }
}
</script>
```

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

### Vue.Draggable Slots

Source: https://github.com/sortablejs/vue.draggable/blob/master/README.md

Usage of header and footer slots for adding non-draggable elements within the component.

```APIDOC
## Vue.Draggable Slots

### Description
Use header and footer slots to insert non-draggable elements into the component. These slots must be used in conjunction with the 'draggable' option to specify which elements are draggable.

### Slots
- **header**: Added before the default slot.
- **footer**: Added after the default slot.

### Usage Example
<draggable v-model="myArray" draggable=".item">
    <div v-for="element in myArray" :key="element.id" class="item">
        {{element.name}}
    </div>
    <button slot="header" @click="addPeople">Add</button>
</draggable>
```

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

### Draggable Table Rows with Vue.Draggable

Source: https://context7.com/sortablejs/vue.draggable/llms.txt

Demonstrates how to make table rows sortable using Vue.Draggable. The 'tag' prop is set to 'tbody' to ensure the draggable component renders as a table body element.

```vue
<template>
  <div>
    <h3>Draggable table</h3>

    <table class="table table-striped">
      <thead class="thead-dark">
        <tr>
          <th scope="col">Id</th>
          <th scope="col">Name</th>
          <th scope="col">Sport</th>
        </tr>
      </thead>
      <draggable v-model="list" tag="tbody">
        <tr v-for="item in list" :key="item.name">
          <td scope="row">{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.sport }}</td>
        </tr>
      </draggable>
    </table>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      list: [
        { id: 1, name: "Abby", sport: "basket" },
        { id: 2, name: "Brooke", sport: "foot" },
        { id: 3, name: "Courtenay", sport: "volley" },
        { id: 4, name: "David", sport: "rugby" }
      ]
    }
  }
}
</script>
```

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

### Migrate `element` prop to `tag` in Vue.draggable

Source: https://github.com/sortablejs/vue.draggable/blob/master/documentation/migrate.md

Use the `tag` prop instead of the deprecated `element` prop to specify the HTML element for the draggable list. This aligns with common conventions.

```html
<draggable v-for="list" element="ul">
    <!-- -->
</draggable>
```

```html
<draggable v-for="list" tag="ul">
  <!-- -->
</draggable>
```

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

### Vue.js 1.0 v-dragable-for Directive Usage

Source: https://github.com/sortablejs/vue.draggable/blob/master/documentation/Vue.draggable.for.ReadME.md

Use the v-dragable-for directive similarly to v-for, passing optional parameters via the 'options' attribute. The options can be a JSON string or a JavaScript object. This directive only works with arrays.

```html
<div v-dragable-for="element in list1" options='{"group":"people"}'>
    <p>{{element.name}}</p>
  </div>
```

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

### Nested Draggable Lists Component

Source: https://context7.com/sortablejs/vue.draggable/llms.txt

A recursive Vue component for creating nested draggable lists. It uses the 'group' option to enable dragging between lists and requires a parent component to provide the initial data structure.

```vue
<!-- nested-draggable.vue - Recursive Component -->
<template>
  <draggable class="dragArea" tag="ul" :list="tasks" :group="{ name: 'g1' }">
    <li v-for="el in tasks" :key="el.name">
      <p>{{ el.name }}</p>
      <nested-draggable :tasks="el.tasks" />
    </li>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: "nested-draggable",
  props: {
    tasks: {
      required: true,
      type: Array
    }
  },
  components: { draggable }
}
</script>

<style>
.dragArea {
  min-height: 50px;
  outline: 1px dashed;
}
</style>
```

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

### Vue.Draggable End Event

Source: https://github.com/sortablejs/vue.draggable/blob/master/README.md

Use the @end event to trigger a method when a drag-and-drop operation concludes. This is useful for updating data or performing actions after an item has been moved.

```html
<draggable :list="list" @end="onEnd">
</draggable>
```

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

### Migrate `options` prop to direct binding in Vue.draggable

Source: https://github.com/sortablejs/vue.draggable/blob/master/documentation/migrate.md

Pass Sortable.js options directly as props to the Vue.draggable component, replacing the deprecated `options` prop. This utilizes a transparent wrapper for passing props to the Sortable instance.

```html
<draggable v-for="list" :options="{handle: '.handle'}">
  <!-- -->
</draggable>
```

```html
<draggable v-for="list" handle=".handle">
  <!-- -->
</draggable>
```

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

### Integrate Vue.Draggable with Element UI

Source: https://context7.com/sortablejs/vue.draggable/llms.txt

Utilize the tag and componentData props to wrap draggable items within third-party UI components like Element UI's collapse.

```vue
<template>
  <div>
    <h3>Integration with Element UI Collapse</h3>

    <draggable
      tag="el-collapse"
      :list="list"
      :component-data="collapseComponentData"
    >
      <el-collapse-item
        v-for="item in list"
        :key="item.id"
        :title="item.title"
        :name="item.id"
      >
        <div v-for="(line, idx) in item.text" :key="idx">{{ line }}</div>
      </el-collapse-item>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      list: [
        {
          title: "Consistency",
          id: 1,
          text: [
            "Consistent with real life: follow natural logic and habits.",
            "Consistent within interface: elements should be uniform."
          ]
        },
        {
          title: "Feedback",
          id: 2,
          text: [
            "Operation feedback: users perceive their actions clearly.",
            "Visual feedback: reflect current state via UI updates."
          ]
        },
        {
          title: "Efficiency",
          id: 3,
          text: [
            "Simplify the process: keep operations intuitive.",
            "Easy to identify: help users understand quickly."
          ]
        }
      ],
      activeNames: [1],
      collapseComponentData: {
        on: {
          input: this.inputChanged
        },
        props: {
          value: this.activeNames
        }
      }
    }
  },
  methods: {
    inputChanged(val) {
      this.activeNames = val
    }
  }
}
</script>
```

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

### Parent Component for Nested Draggable Lists

Source: https://context7.com/sortablejs/vue.draggable/llms.txt

This component utilizes the 'nested-draggable.vue' to display a hierarchical list structure. It initializes the data with a sample nested array and passes it to the nested-draggable component.

```vue
<!-- Parent component using nested-draggable -->
<template>
  <div>
    <h3>Nested draggable</h3>
    <nested-draggable :tasks="list" />
  </div>
</template>

<script>
import nestedDraggable from './nested-draggable'

export default {
  components: { nestedDraggable },
  data() {
    return {
      list: [
        {
          name: "task 1",
          tasks: [
            {
              name: "task 2",
              tasks: []
            }
          ]
        },
        {
          name: "task 3",
          tasks: [
            {
              name: "task 4",
              tasks: []
            }
          ]
        },
        {
          name: "task 5",
          tasks: []
        }
      ]
    }
  }
}
</script>
```

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

### TypeScript Type Definitions for MoveEvent

Source: https://context7.com/sortablejs/vue.draggable/llms.txt

Provides TypeScript type definitions for the `MoveEvent` object, which is passed to event handlers like `checkMove`. This enables type-safe development when working with drag-and-drop events.

```typescript
import draggable from 'vuedraggable'

// Type definitions available:
interface DraggedContext<T> {
  index: number
  futureIndex: number
  element: T
}

interface DropContext<T> {
  index: number
  component: Vue
  element: T
}

interface Rectangle {
  top: number
  right: number
  bottom: number
  left: number
  width: number
  height: number
}

interface MoveEvent<T> {
  originalEvent: DragEvent
  dragged: Element
  draggedContext: DraggedContext<T>
  draggedRect: Rectangle
  related: Element
  relatedContext: DropContext<T>
  relatedRect: Rectangle
  from: Element
  to: Element
  willInsertAfter: boolean
  isTrusted: boolean
}

// Usage in component
export default {
  components: { draggable },
  methods: {
    checkMove(evt: MoveEvent<MyItemType>): boolean {
      return evt.draggedContext.element.canDrag
    }
  }
}
```

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

### Vue.Draggable Footer Slot

Source: https://github.com/sortablejs/vue.draggable/blob/master/README.md

The 'footer' slot allows you to add non-draggable elements after the list items. Similar to the header slot, use the 'draggable' option to specify draggable elements.

```html
<draggable v-model="myArray" draggable=".item">
    <div v-for="element in myArray" :key="element.id" class="item">
        {{element.name}}
    </div>
    <button slot="footer" @click="addPeople">Add</button>
</draggable>
```

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

### Vue.Draggable Change Event

Source: https://github.com/sortablejs/vue.draggable/blob/master/README.md

The 'change' event is triggered when the list prop is altered due to drag-and-drop. It provides details about added, removed, or moved elements within the list.

```html
<draggable v-model="myArray" draggable=".item">
    <div v-for="element in myArray" :key="element.id" class="item">
        {{element.name}}
    </div>
    <button slot="header" @click="addPeople">Add</button>
</draggable>
```

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