sortablejs/vue.draggable

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

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

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

Click or tap to explore — scroll the page freely

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 drag-and-drop add-on for Vue.js, a popular framework for building interactive websites. Often you want users to grab an item with the mouse (or a finger on a touchscreen), drag it somewhere else, and have the order in your underlying data update to match, think reordering a to-do list, moving cards between columns, or rearranging menu items. This library gives you a draggable component that does exactly that, while keeping the HTML you see on screen and the JavaScript array behind it automatically in sync. It is a wrapper around Sortable.js, a well-known plain-JavaScript drag-and-drop library, so it inherits all of Sortable.js's features: touch device support, drag handles, smart auto-scrolling when the cursor reaches the edge of a container, dragging items between different lists, no dependency on jQuery, and the ability to cancel a drag mid-operation. The Vue wrapper adds Vue-specific niceties: it works with Vue's transition-group for animated reordering, it supports two-way binding through v-model so dragging updates your data directly, it works with Vuex (Vue's state-management library) via computed get/set, and it lets you wrap existing UI library components such as Vuetify, Element, or Vue Material so their items become draggable. You install it from npm or yarn as the vuedraggable package, or pull it from a CDN with a script tag alongside Vue and Sortable. Inside a template you use a draggable element, bind your array with v-model, and write your normal v-for inside, the component takes care of the rest. All Sortable.js options (group, handle, ghost-class, sort and so on) can be passed as props since version 2.19, and there are header and footer slots for content that should not be draggable. Important versioning note from the README: this package is for Vue.js 2.0, a separate project, vue.draggable.next, exists for Vue 3.

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

← sortablejs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.