{"id":12464,"library":"vue-draggable","title":"Vue Draggable","description":"Vue Draggable is a lightweight, dependency-free drag and drop library specifically designed for Vue.js applications. It leverages native HTML5 drag and drop APIs, making it a performant choice for reordering lists or moving items between zones. The current stable version is 2.0.6, and it primarily targets Vue 2.x environments. Its key differentiators include its complete lack of external dependencies, offering a lean footprint, and providing flexible integration options as a global plugin, a local directive, or an optional renderless component (`VueDraggableGroup`) for advanced reactivity management. While it does not specify a strict release cadence, updates are generally aligned with maintaining compatibility and addressing issues within the Vue 2 ecosystem.","status":"active","version":"2.0.6","language":"javascript","source_language":"en","source_url":"https://github.com/Vivify-Ideas/vue-draggable","tags":["javascript","vue","vuejs","html5","drag","drop","draggable","typescript"],"install":[{"cmd":"npm install vue-draggable","lang":"bash","label":"npm"},{"cmd":"yarn add vue-draggable","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-draggable","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Used for global plugin registration with `Vue.use()`","wrong":"import { VueDraggable } from 'vue-draggable'","symbol":"VueDraggable","correct":"import VueDraggable from 'vue-draggable'"},{"note":"Used for local directive registration in a Vue component","wrong":"import VueDraggableDirective from 'vue-draggable'","symbol":"VueDraggableDirective","correct":"import { VueDraggableDirective } from 'vue-draggable'"},{"note":"Renderless component for reactive data handling, available since Vue 2.6+","wrong":"import VueDraggableGroup from 'vue-draggable'","symbol":"VueDraggableGroup","correct":"import { VueDraggableGroup } from 'vue-draggable'"}],"quickstart":{"code":"import Vue from 'vue';\nimport VueDraggable from 'vue-draggable';\n\nVue.use(VueDraggable);\n\nnew Vue({\n  el: '#app',\n  template: `\n    <div id=\"app\">\n      <h3>My Drag & Drop Lists</h3>\n      <div v-drag-and-drop:options=\"options\">\n        <ul @added=\"onAdded\" @removed=\"onRemoved\" @reordered=\"onReordered\">\n          <li v-for=\"item in items1\" :key=\"item.id\" :data-id=\"item.id\">{{ item.name }}</li>\n        </ul>\n        <ul @added=\"onAdded\" @removed=\"onRemoved\" @reordered=\"onReordered\">\n          <li v-for=\"item in items2\" :key=\"item.id\" :data-id=\"item.id\">{{ item.name }}</li>\n        </ul>\n      </div>\n    </div>\n  `,\n  data() {\n    return {\n      items1: [\n        { id: 1, name: 'Task A' },\n        { id: 2, name: 'Task B' }\n      ],\n      items2: [\n        { id: 3, name: 'Task X' },\n        { id: 4, name: 'Task Y' }\n      ],\n      options: {\n        dropzoneSelector: 'ul',\n        draggableSelector: 'li',\n        multipleDropzonesItemsDraggingEnabled: true,\n        onDrop: (event) => {\n          console.log('Item dropped:', event.items.map(i => i.dataset.id));\n          // For simple scenarios, manual data manipulation would go here.\n          // For reactive data, VueDraggableGroup is recommended.\n        }\n      }\n    };\n  },\n  methods: {\n    onAdded({ ids, index, dropzone }) {\n      console.log('Item added:', ids, 'at index:', index, 'in dropzone:', dropzone);\n      // Update your data model based on these events\n    },\n    onRemoved({ ids, index, dropzone }) {\n      console.log('Item removed:', ids, 'from index:', index, 'in dropzone:', dropzone);\n    },\n    onReordered({ ids, index, dropzone }) {\n      console.log('Item reordered:', ids, 'at index:', index, 'in dropzone:', dropzone);\n    }\n  }\n});","lang":"javascript","description":"Demonstrates global plugin setup, basic usage of the `v-drag-and-drop` directive with options, and handling custom dropzone events in a Vue 2 application."},"warnings":[{"fix":"For Vue 3 projects, consider using alternative drag and drop libraries designed for Vue 3, such as 'Vue.Draggable' (based on Sortable.js) or 'vuedraggable-next'.","message":"This library is designed for Vue 2.x and is not compatible with Vue 3. Using it with Vue 3 will lead to runtime errors, particularly with `Vue.use()` or directive registration.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Add a unique `:data-id=\"item.id\"` binding to each draggable element in your `v-for` loop.","message":"When utilizing the custom dropzone events (@added, @removed, @reordered), ensure that your draggable list items (e.g., `<li>` elements) have a `data-id` attribute defined. Without this, the event payload's `ids` array will be empty.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"If using VueDraggableGroup, ensure your project is running Vue 2.6.0+ or handle data model manipulation manually within the `onDrop` callback or custom events.","message":"The `VueDraggableGroup` renderless component, which provides built-in reactivity handling for drag-and-drop operations, requires Vue.js version 2.6.0 or higher. Using it with older Vue 2 versions might result in unexpected behavior or errors.","severity":"gotcha","affected_versions":"<2.6.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"This library is not compatible with Vue 3. Migrate to a Vue 3 compatible drag and drop solution or downgrade your Vue version to 2.x.","cause":"Attempting to use `Vue.use(VueDraggable)` in a Vue 3 environment, where the global `Vue` instance and plugin API have changed significantly.","error":"TypeError: Cannot read properties of undefined (reading 'use')"},{"fix":"Ensure `Vue.use(VueDraggable)` is called once at your application's entry point, or if registering locally, `import { VueDraggableDirective } from 'vue-draggable'` and include it in `directives: { dragAndDrop: VueDraggableDirective }` within your component options.","cause":"The `v-drag-and-drop` directive has not been properly registered, either globally via `Vue.use(VueDraggable)` or locally in the component's `directives` option.","error":"Failed to resolve directive: drag-and-drop"},{"fix":"For reactive data, consider using the `VueDraggableGroup` renderless component. If handling manually, ensure `reactivityEnabled: true` in your options and implement logic within `onDrop`, `@added`, `@removed`, or `@reordered` events to update your underlying data arrays.","cause":"Manual data manipulation for reordering/moving items is not implemented, or the `reactivityEnabled` option is set to `false`, or `VueDraggableGroup` is not used for reactive data structures.","error":"Items are not visually reordering or data model is not updating correctly after a drag-and-drop operation."}],"ecosystem":"npm"}