explaingit

sortablejs/vue.draggable.next

★ 4,491JavaScriptAudience · vibe coderComplexity · 2/5Setup · easy

TLDR

Vue.draggable.next adds drag-and-drop reordering to lists in Vue 3 apps, wrap your list in one component and users can grab items and drop them in a new position, with the underlying data updating automatically to match.

Mindmap

mindmap
  root((vue.draggable.next))
    What it does
      Drag-and-drop lists
      Auto data sync
    Features
      Touch support
      Cross-list drag
      Drag handles
      Auto-scroll
    Integration
      Vuetify
      Element Plus
    Setup
      npm or yarn install
      v-model binding
    Audience
      Vue developers
      Vibe coders
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add drag-and-drop card reordering to a Kanban board or to-do list app built with Vue 3.

USE CASE 2

Let users rearrange items in a playlist or ranked list by dragging, on both desktop and mobile touch screens.

USE CASE 3

Build a feature where users drag items between two separate lists, like moving tasks from a backlog to an active sprint.

USE CASE 4

Enable drag-and-drop reordering within a Vuetify or Element Plus list component.

Tech stack

JavaScriptVue.js

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

Vue.draggable.next is a component for Vue.js 3 (a popular JavaScript framework for building web interfaces) that lets developers add drag-and-drop behavior to lists on a page. If you have ever used a project board or to-do app where you can grab a card and drop it in a new position, this library provides the building blocks for exactly that kind of interaction. The component works by wrapping a list of items in your web page. When a user picks up an item and drops it somewhere new, the list stored in your app's data updates automatically to match the new order. This keeps the visual display and the underlying data in sync without the developer writing extra code to reconcile them. The library supports touch screens, so it works on phones and tablets as well as desktop browsers. It can handle dragging items between two separate lists, supports drag handles (a specific part of an item that initiates the drag), and includes smart auto-scrolling when you drag near the edge of a container. It does not require jQuery, a JavaScript library that older projects often depend on. The component also works alongside popular Vue UI libraries such as Vuetify and Element. If your app already uses one of those for its look and feel, you can apply draggable behavior on top of their components using two configuration props. For developers moving from the Vue 2 version of this library, the README lists the breaking changes clearly. Items now require a unique key, and you define how each item looks using a named slot rather than placing elements directly inside the component tag. Installation takes a single terminal command, either with npm or yarn. Basic usage in a template is a few lines of markup binding your data array to the component via Vue's v-model convention.

Copy-paste prompts

Prompt 1
Add drag-and-drop reordering to a Vue 3 to-do list using vue.draggable.next. Show me the full component with the draggable wrapper, v-model binding to a tasks array, and a slot template for each task item.
Prompt 2
I want users to drag items between two lists in my Vue 3 app using vue.draggable.next. Show me the setup for two draggable components that share a common group name so items can move between them.
Prompt 3
Using vue.draggable.next, add a drag handle to each list item so users can only start a drag by clicking a specific grip icon, not by clicking anywhere on the card.
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.