Skip to content
Get packs

Vue.Draggable

A Vue 2 component that makes lists drag-and-drop reorderable and keeps the array in sync.

GitHub Download v2.24.3
Stars
20.5k
Forks
2.8k
Licence
MIT
Language
JavaScript
Last update
2.7 years ago
Type
Library

No commits in over a year — check for forks or alternatives before adopting.

What it is

Vue.Draggable is a component for Vue.js 2 that lets users reorder items in a list by dragging them, and between lists. It wraps Sortable.js and updates your app's array to match what the user dragged, so the screen and your data stay in sync. The README says it is for Vue 2; a separate project handles Vue 3.

  • Reorder a to-do or task list by dragging items
  • Move items between two lists, such as a group and a pool of people
  • Make components from UI libraries like Vuetify or Element draggable
  • Cancel a drag using a move function that returns false

Great for

  • Vue 2 developers adding drag-to-reorder lists to an app
  • Teams that want Sortable.js features inside Vue components
  • Apps that need drag between multiple lists
  • Projects using Vuex that want v-model based list updates

Not ideal for

  • Vue 3 projects, since the README points to a separate vue.draggable.next project for that version
  • Developers not using Vue, because this is a Vue-specific wrapper
  • Users who want a finished end-user app rather than a code component
Step-by-step guide: how to use Vue.DraggableInstall, first run, examples, tips and FAQs
Dragula vs Vue.DraggableMint UI vs Vue.Draggable

How to get it

  1. 1

    Install with a package manager

    You'll need: Vue.js 2.0 · Node.js and npm or yarn

    Install with yarn

    yarn add vuedraggable

    Install with npm

    npm i -S vuedraggable
  2. 2

    Run it

    • Install the vuedraggable package with npm or yarn
    • Import draggable from 'vuedraggable' and register it in your component
    • Wrap your v-for list in the draggable component with v-model set to your array
    • Add a :key to each item so Vue can track them
  3. 3

    Get the most out of it

    • Use the list or value props and the change events to react to reordering
    • Use the handle option so only part of each item starts a drag
    • Use the group option to control drag between lists, including clone and put settings
    • Use the move function to block certain drags
    • Use tag and componentData to wrap UI library components

Downloads

Source code (.zip)master branch · straight from GitHubRelease v2.24.3Release notes and sourceOfficial website & docssortablejs.github.io/Vue.Draggable/

Strengths

  • Based on Sortable.js and offers its features, including touch support and drag handles
  • Keeps the HTML list and the Vue array in sync through v-model
  • Supports Sortable.js options as props and has events for fine control

Trade-offs

  • The README targets Vue 2; Vue 3 users must use a different project
  • The README is truncated and the last push was March 2024, so current maintenance status is unclear

How it compares

ProjectStarsTypeLevelUpdatedBest for
Vue.Draggable (this)20.5kLibraryintermediate2.7 years agoVue 2 developers adding drag-to-reorder lists to an app
dragula22.1kLibrarybeginner2.4 years agoFront-end developers who want drag-and-drop without a large framework
mint-ui16.4kLibraryintermediate4.7 years agoDevelopers building mobile-style web pages or apps with Vue 2
tiptap38.9kLibraryintermediate4 days agoDevelopers building a custom text editor into a web product
Sortable31.2kLibrarybeginner8 months agoWeb developers adding reorderable lists to a site or app
vuex28.3kLibraryintermediate2.1 years agoTeams maintaining an existing Vue app that already uses Vuex

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.