vuedraggable is a Vue 2.x component that provides drag-and-drop functionality for lists, leveraging the robust capabilities of Sortable.js. Version 2.24.3, published over five years ago, is specifically tailored for Vue 2 applications, offering declarative list reordering, multi-drag, and nested list support. It acts as a lightweight wrapper around Sortable.js, abstracting away direct DOM manipulation and integrating seamlessly with Vue's reactivity system. While newer versions (v4.x) exist for Vue 3, this entry focuses on the 2.x branch, which received consistent maintenance and updates for features like TypeScript definitions (since 2.24.0) and SSR compatibility fixes (like in 2.23.2). Its key differentiator remains the powerful and flexible drag-and-drop mechanics inherited from Sortable.js, presented in a Vue-idiomatic way, making it a widely adopted solution for interactive list management in legacy Vue 2 projects.
npm install vuedraggableVerified import paths — ran on the pinned version, not inferred.
This example demonstrates basic usage of `vuedraggable` (v2.x) to create two interconnected sortable lists in a Vue 2 application. It uses `v-model` for data synchronization, `group` for drag-and-drop between lists, and logs `start`, `end`, and `change` events to the console.
For Vue 3 projects, install `vuedraggable@next` or `vue-draggable-next` (e.g., `npm i vuedraggable@next` or `yarn add vuedraggable@next`). For Vue 2 projects, ensure you are using a `vuedraggable` v2.x version.
Always use a unique and stable identifier for the `:key` prop on elements rendered inside `vuedraggable`'s slot, such as an item's `id` property (e.g., `:key="element.id"`).
Install the Sortable.js type definitions: `npm install --save-dev @types/sortablejs`. Then, import types as needed, e.g., `import type { SortableEvent } from 'sortablejs';`.Upgrade to `vuedraggable` v2.19.0 or higher. If upgrading isn't an option, continue using the `:options` prop to pass Sortable.js configuration. For newer versions, prefer direct props (e.g., `group="items"`, `animation="150"`) but avoid 'on'-prefixed methods as props, as these are handled by `vuedraggable` events.
Consider adding a specific 'handle' element to your draggable items (e.g., `<span class="handle">:::</span>`). Then, configure `vuedraggable` with the `handle` prop: `:handle=".handle"`. This ensures only interaction with the handle triggers dragging. Also, ensure `touch-action: none;` is not preventing touch events on touch devices.
Ensure `draggable` is included in the `components` option of your Vue component (e.g., `components: { draggable }`) or registered globally with `Vue.component('draggable', draggable);`.Ensure the data bound to `v-model` (or `list`) is a reactive array. If using Vuex, you might need to use the `list` prop and handle changes via `splice` in actions/mutations, or use the `clone` prop for complex objects to avoid direct mutation issues.
Verify that each item in your `v-for` loop inside `<draggable>` has a unique and stable `:key` prop, preferably an `id` from your data, not an array index. Also, ensure you are not accidentally creating new list instances instead of modifying the existing one.
Consult `vuedraggable` examples for nesting. When using with tables, `vuedraggable` might need to wrap `<tbody>` or individual `<tr>` elements, often requiring `tag="tbody"` or `tag="tr"` on the draggable component. For `v-data-table`, ensure `draggable` is correctly placed within its slots, like `tbody`, and adjust the `tag` prop accordingly.