Drag & drop / sortable components for Vue 3, built on smooth-dnd.
Live demo

• Two components, <Container> and <Draggable>, that render your own markup
• Sortable lists, kanban boards (nested containers), copy / move / contain / drop-zone behaviours
• Smooth CSS-transition animations, drop placeholder, drag handles, auto scroll (elements and the window)
• TypeScript types included, zero runtime dependencies (smooth-dnd is bundled and maintained here, see Credits)

npm install vue3-smooth-dnd

Requires Vue ^3.3 (the type declarations are generated against Vue 3.5).

<script setup lang="ts">
import { ref } from 'vue'
import { Container, Draggable, type DropResult } from 'vue3-smooth-dnd'

const items = ref([
  { id: 1, title: 'Princess Mononoke' },
  { id: 2, title: 'Spirited Away' },
  { id: 3, title: 'My Neighbor Totoro' },
])

function onDrop({ removedIndex, addedIndex, payload }: DropResult) {
  if (removedIndex === null && addedIndex === null) return
  const result = [...items.value]
  const item = removedIndex !== null ? result.splice(removedIndex, 1)[0] : payload
  if (addedIndex !== null) result.splice(addedIndex, 0, item)
  items.value = result
}
</script>

<template>
  <Container @drop="onDrop">
    <Draggable v-for="item in items" :key="item.id">
      <div class="card">{{ item.title }}</div>
    </Draggable>
  </Container>
</template>

<Container> never touches your DOM on drop: it emits drop and you update your data, Vue re-renders.

Give the containers the same group-name. Every container involved emits drop: the source with a removedIndex, the target with an addedIndex. Use get-child-payload so the target knows what was dropped:

<Container
  v-for="column in columns"
  :key="column.id"
  group-name="cards"
  :get-child-payload="(index) => column.items[index]"
  @drop="onDrop(column, $event)"
>

The Kanban demo shows nested containers (draggable columns holding draggable cards), should-accept-drop, drop placeholders and ghost classes.

All props except orientation are reactive: changing them updates the running container.

Wraps one item. It renders a div (or tag) with the class smooth-dnd-draggable-wrapper; attributes and classes fall through. Keep margins on your inner element rather than on the <Draggable> itself: the drag ghost is a clone of the wrapper.

<Draggable tag="li" class="row">…</Draggable>

import { smoothDnD } from 'vue3-smooth-dnd'

smoothDnD.isDragging() // boolean
smoothDnD.cancelDrag() // abort the current drag, everything animates back
smoothDnD.maxScrollSpeed = 1500 // px/s used by auto scroll
smoothDnD.useTransformForGhost = true // move the ghost with translate3d instead of top/left

• A <style> block with the required layout rules is injected once. The classes you may want to target: smooth-dnd-container, smooth-dnd-draggable-wrapper, smooth-dnd-ghost.
• The injected rules are unlayered: position: relative; min-height: 30px; min-width: 30px on containers, display: table on horizontal ones, display: block; overflow: hidden on wrappers in vertical ones. With cascade layers (Tailwind 4 puts utilities in @layer utilities) an unlayered rule always wins, so flex or min-h-64 on a <Container> have no effect there. Use the important modifier (flex!, min-h-64!), an inline style, or an unlayered rule of your own.
• While a drag is running <body> has the class smooth-dnd-dragging, and draggables get pointer-events: none so :hover styles don't fire on the items under the ghost. To restore hover during drags: .smooth-dnd-dragging .smooth-dnd-draggable-wrapper { pointer-events: auto }.
• Add smooth-dnd-prevent-auto-scroll-class to a scrollable element (or to <html> / <body> for the window) to exclude it from auto scroll.

The ghost is position: fixed and appended to the container. An ancestor with transform, filter, perspective or contain becomes its containing block and would offset it, so in that case the ghost is automatically re-parented to <body>. If you need a different parent (for example to keep inherited styles or CSS variables), pass get-ghost-parent.

• smooth-dnd is no longer a dependency; it is bundled. smoothDnD, constants, dropHandlers and all types are still exported from vue3-smooth-dnd.
• Props you don't set no longer override smooth-dnd's defaults (a <Container> without behaviour used to lose its drop-out animation, without animation-duration its animations, without orientation its layout class).
• Props are reactive now (except orientation).
• ESM (import), CommonJS (require) and a UMD build (unpkg / jsdelivr, global Vue3SmoothDnD) are published, plus TypeScript declarations.
• Node 20.19+ / modern browsers only; the IE polyfills were dropped.

The repository is the package itself plus a demo workspace (npm workspaces, Node 22).

npm install
npm run dev          # demo on http://localhost:5173/
npm run lint         # eslint
npm run format       # prettier
npm run typecheck    # tsc
npm test             # playwright (uses your Chrome; run `npx playwright install chromium` otherwise)
npm run build        # → dist (esm, cjs, umd, .d.ts)
npm run build:demo   # → demo/dist

First-time setup:

• Repository settings → Pages → Source: GitHub Actions. From then on every push to main runs the Deploy demo workflow and publishes demo/dist to https://g1lg1l.github.io/vue3-smooth-dnd/.
• On npmjs.com create an automation token (Access Tokens → Generate new token → Automation, or a granular token with publish rights for vue3-smooth-dnd) and store it in the repository as the NPM_TOKEN secret (Settings → Secrets and variables → Actions).

Every release:

1. npm version <patch|minor|major> bumps package.json, commits and tags (for example v1.0.1).
2. Describe the changes in CHANGELOG.md, commit, then git push --follow-tags.
3. On GitHub, draft a release for that tag and publish it. The Release workflow runs the type check and npm publish --provenance.

Without the workflow: npm login once, then npm publish from the repository root. prepublishOnly builds first.

This package started as a Vue 3 port of vue-smooth-dnd. Both it and the bundled core, smooth-dnd, were written by Kutlu Sahin (MIT). smooth-dnd is unmaintained upstream, so its source lives in this repository under src/smooth-dnd with bug fixes on top.

MIT