explaingit

sortablejs/vue.draggable

★ 20,612JavaScriptAudience · developerComplexity · 2/5DormantLicenseSetup · easy

TLDR

A Vue.js component that makes lists draggable and sortable with automatic data synchronization, built on Sortable.js.

Mindmap

mindmap
  root((repo))
    What it does
      Drag and drop lists
      Auto-sync data
      Touch support
    Features
      Multi-list dragging
      Animated transitions
      Custom handles
      Event monitoring
    Use cases
      Reorderable task lists
      Kanban boards
      Shopping carts
      UI library integration
    Tech stack
      Vue 2
      Sortable.js
      No jQuery

Things people build with this

USE CASE 1

Build reorderable to-do lists where dragging items updates the underlying data automatically.

USE CASE 2

Create Kanban boards with drag-and-drop between columns that sync with your app state.

USE CASE 3

Make shopping cart items draggable to reorder or move between wishlists.

USE CASE 4

Wrap UI library components (Vuetify, Element UI) to add drag-and-drop without rebuilding them.

Tech stack

Vue.jsSortable.jsJavaScript

Getting it running

Difficulty · easy Time to first run · 5min
Use freely for any purpose including commercial, as long as you keep the copyright notice.

In plain English

Vue.Draggable is a small library that lets developers add drag-and-drop reordering to lists in a Vue.js application. Vue.js is a popular framework for building web interfaces, and Vue.Draggable plugs into it as a component you can drop into your template to make a list of items rearrangeable by clicking and dragging with the mouse or a finger on a touch screen. Under the hood, Vue.Draggable wraps Sortable.js, an older general-purpose drag-and-drop library, and exposes its features in a way that fits naturally with how Vue thinks about data. The core idea is that you have an array of items in your application state, and the draggable component keeps that array in sync automatically: when the user drags an item to a new position, the array order is updated, and when the array changes in code, the rendered list updates to match. This works through Vue's v-model directive on a value prop, and there is also a list prop alternative that mutates the array directly. The README states that it supports touch devices, drag handles, smart auto-scrolling, dragging between different lists, and cancellation of a drag. It works alongside Vue's transition-group for animated reordering, and it can wrap components from existing UI libraries such as Vuetify, Element, and Vue Material so their elements become draggable. It has no jQuery dependency. Someone would use Vue.Draggable to build interfaces like sortable to-do lists, kanban boards, image galleries, or any list a user should be able to rearrange. Note that this package targets Vue.js 2; the README points to a separate vue.draggable.next project for Vue 3. The full README is longer than what was provided.

Copy-paste prompts

Prompt 1
Show me how to set up vue.draggable to make a list of items draggable with automatic data binding in Vue 2.
Prompt 2
How do I use vue.draggable to drag items between multiple lists and keep them synchronized?
Prompt 3
Can you show me how to add drag handles and custom styling to a vue.draggable list?
Prompt 4
How do I integrate vue.draggable with a Vuetify component to make it draggable?
Open on GitHub → Explain another repo

Generated 2026-05-21 · Model: sonnet-4-6 · Verify against the repo before relying on details.