{"id":12458,"library":"vue-drag-drop","title":"Vue Drag and Drop Wrapper","description":"vue-drag-drop is a lightweight Vue wrapper designed to simplify the often \"wonky\" native HTML Drag and Drop API. It aims to abstract away common pitfalls, such as the inability to access transferred data during `dragover` events, the need to manually serialize complex data types like objects and arrays, and the requirement for `event.preventDefault()` on drop zones. The current stable version is 1.1.4. While it does not specify a strict release cadence, updates have occurred since its major 1.0.0 release, which introduced significant changes. Key differentiators include its focus on simplicity and a minimal API, contrasting with more comprehensive drag-and-drop solutions that often include list reordering or extensive UI features. It is specifically built for Vue 2 applications and ships with TypeScript type definitions.","status":"active","version":"1.1.4","language":"javascript","source_language":"en","source_url":"https://github.com/cameronhimself/vue-drag-drop","tags":["javascript","vue","vuejs","plugin","typescript"],"install":[{"cmd":"npm install vue-drag-drop","lang":"bash","label":"npm"},{"cmd":"yarn add vue-drag-drop","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-drag-drop","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This package is a Vue.js component library and requires Vue as a peer dependency.","package":"vue","optional":false}],"imports":[{"note":"Used for individual component registration, allowing custom naming or selective inclusion in a Vue 2 application.","wrong":"import Drag from 'vue-drag-drop'; // Incorrectly importing a named export as default\nconst { Drag, Drop } = require('vue-drag-drop'); // CommonJS require in modern Vue projects using bundlers","symbol":"Drag, Drop","correct":"import { Drag, Drop } from 'vue-drag-drop';"},{"note":"Used for global plugin installation via `Vue.use()`, which automatically registers both `<Drag>` and `<Drop>` components globally in Vue 2.","wrong":"import { VueDragDrop } from 'vue-drag-drop'; // Incorrectly importing a default export as named","symbol":"VueDragDrop (plugin)","correct":"import VueDragDrop from 'vue-drag-drop';"},{"note":"This method is for direct browser usage via `<script>` tags, where the plugin either auto-installs or exposes `VueDragDrop` globally for manual component registration.","wrong":"import VueDragDrop from './node_modules/vue-drag-drop/dist/vue-drag-drop.browser.js'; // Incorrect import path for browser global; typically used via script tag","symbol":"VueDragDrop (browser global)","correct":"// Include via <script src=\"vue-drag-drop/dist/vue-drag-drop.browser.js\"></script>\n// Then access: Vue.component('drag', VueDragDrop.Drag)"}],"quickstart":{"code":"<template>\n  <div id=\"app\">\n    <h1>Vue Drag Drop Basic Demo</h1>\n    <div style=\"display: flex; gap: 20px; justify-content: center;\">\n      <drag\n        :transfer-data=\"{ type: 'file', name: 'document.pdf', size: '1.2MB' }\"\n        effect-allowed=\"copy\"\n        class=\"drag-item\"\n      >\n        <span>Draggable File</span>\n      </drag>\n\n      <drop\n        @drop=\"onDrop\"\n        @dragenter=\"onDragEnter\"\n        @dragleave=\"onDragLeave\"\n        @dragover.prevent\n        class=\"drop-zone\"\n        :class=\"{ 'drag-over': isDragOver }\"\n      >\n        <p>{{ dropMessage }}</p>\n        <p v-if=\"droppedData\">File: {{ droppedData.name }} ({{ droppedData.size }})</p>\n      </drop>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { Drag, Drop } from 'vue-drag-drop';\n\nexport default Vue.extend({\n  components: { Drag, Drop },\n  data() {\n    return {\n      droppedData: null as { type: string; name: string; size: string } | null,\n      dropMessage: 'Drop files here!',\n      isDragOver: false,\n    };\n  },\n  methods: {\n    onDrop(data: any) {\n      this.droppedData = data;\n      this.dropMessage = `Dropped ${data.name}!`;\n      this.isDragOver = false;\n      console.log('Dropped data:', data);\n    },\n    onDragEnter() {\n      this.isDragOver = true;\n      this.dropMessage = 'Release to drop...';\n    },\n    onDragLeave() {\n      this.isDragOver = false;\n      this.dropMessage = 'Drop files here!';\n    },\n  },\n});\n</script>\n\n<style scoped>\n.drag-item { padding: 15px 25px; background-color: #42b983; color: white; border-radius: 5px; cursor: grab; }\n.drop-zone { padding: 30px; border: 2px dashed #ccc; border-radius: 5px; min-width: 250px; text-align: center; }\n.drop-zone.drag-over { border-color: #42b983; background-color: #e6ffe6; }\n</style>","lang":"typescript","description":"This example demonstrates basic drag and drop functionality using `vue-drag-drop` components, showing how to transfer data and respond to `drop`, `dragenter`, and `dragleave` events, including visual feedback for the drop zone."},"warnings":[{"fix":"Always use the `transfer-data` prop on the `<Drag>` component to provide data, and access the transferred data through the event payload provided by `vue-drag-drop`'s custom events (e.g., `@drop`) on the `<Drop>` component, rather than attempting to read `event.dataTransfer` directly.","message":"Beginning with version 1.0.0, `vue-drag-drop` no longer relies on the native `event.dataTransfer` property for cross-browser compatibility, especially for IE/Edge. Instead, it uses a global variable to manage drag transfer information. While designed to be robust, this change could theoretically impact extreme edge cases involving simultaneous drag events.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"For Vue 3 projects, consider alternative drag-and-drop libraries or the native browser API. Do not attempt to use `vue-drag-drop` with Vue 3.","message":"This library is designed for Vue 2 applications, as indicated by the `vue-2.x` badge in its documentation. It is not compatible with Vue 3 and will likely lead to errors if used in a Vue 3 project due to breaking changes in Vue's API.","severity":"gotcha","affected_versions":"*"},{"fix":"Evaluate your specific drag-and-drop needs. If you require advanced features like list reordering, virtualized lists with drag/drop, or complex UI interactions, explore libraries explicitly designed for those use cases instead of trying to extend `vue-drag-drop`.","message":"While `vue-drag-drop` simplifies the browser's Drag and Drop API, it is primarily intended for simple data transfer between a draggable and a dropzone. It is not a comprehensive solution for complex list reordering, sorting, or multi-item dragging scenarios, which typically require more specialized libraries.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Access the transferred data directly from the first argument of `vue-drag-drop`'s custom event handlers (e.g., `onDrop(data, event) { /* use data */ }`). The `transfer-data` prop is automatically made available here.","cause":"Attempting to access `event.dataTransfer` directly within a custom drag/drop handler after version 1.0.0, which no longer uses this for internal data transfer.","error":"Property 'transferData' does not exist on type 'DragEvent'"},{"fix":"Ensure you have either called `Vue.use(VueDragDrop)` globally or individually registered `Drag` and `Drop` components using `Vue.component('drag', Drag)` and `Vue.component('drop', Drop)` within your component's `components` option.","cause":"The `<Drag>` or `<Drop>` component has not been correctly registered in your Vue application, or Vue is not properly configured to recognize custom elements.","error":"[Vue warn]: Unknown custom element: <drag> - did you register the component correctly?"},{"fix":"Ensure that `vue.js` (or `vue.min.js`) is loaded *before* `vue-drag-drop.browser.js` in your HTML `<script>` tags, or if using a module bundler, ensure proper import order and configuration.","cause":"This typically occurs in a browser environment when `vue-drag-drop.browser.js` is loaded, but Vue itself is not yet available globally, or if you're trying to access `VueDragDrop.Drag` before the script has properly executed.","error":"TypeError: Cannot read properties of undefined (reading 'Drag')"}],"ecosystem":"npm"}