vue-draggable-plus: Sortablejs for Vue 3 and Vue 2.7 in One Package

The problem vue-draggable-plus solves: a drag list on an element you do not own

Sortablejs needs a DOM container. The older Vue wrappers assumed that container was the component's own root element, so a drag list was written by putting the list component as a direct child of the wrapper. That works until you use a component library. If the library's list component has no slot for its root element, you cannot get a handle on the node Sortablejs must attach to, and the drag list cannot be built.

vue-draggable-plus takes a different route. The README states it lets you "use a drag list on any element", because you can pass the selector of the target element and that element becomes the container for Sortablejs. The project's own description of its birth is narrow and honest: the Vue 3 component of Sortablejs had not been updated and had fallen out of step with Vue 3.

The audience is therefore specific. You are building a Vue 3 or Vue 2.7 app, you already accept Sortablejs as the drag engine, and you have a reorderable list whose root node you do not control. If your list is a plain div you render yourself, the selector trick buys you nothing you did not already have.

Three entry points over one Sortablejs instance

The package exports a component, a composable and a directive, and the README says one of the three will suit you. All three end up configuring the same Sortablejs instance, and Options inherits every configuration item from Sortablejs, so animation, group, handle and the rest keep their upstream meaning.

The component form is the shortest path: VueDraggable takes v-model and the array is reordered in place. The composable form, useDraggable, takes an element ref and the list, and returns an object with methods such as start, destroy and pause, which is what you want when the drag has to be switched on and off at runtime. The directive form, vDraggable, binds a tuple of the list and an options object to an element, which keeps the template free of a wrapper component.

Events follow the same shape in every form. The README says all event functions starting with on can be passed to components using v-on, so @start and @end work on VueDraggable, and the equivalent onStart and onUpdate keys work in the options object of useDraggable. The handler receives a SortableEvent from sortablejs, which is the upstream event type rather than a re-exported one.

Installing vue-draggable-plus and reordering a list with the composable

The README gives one install command and no peer dependency table, so the Vue version you already have is the one that applies. The package publishes ESM, CommonJS, UMD and IIFE builds, with unpkg and jsdelivr fields pointing at the IIFE file for a script-tag load.

npm install vue-draggable-plus

After that, import the composable and hand it an element ref plus the array. The example below is the README's function usage, with the animation option and the two callbacks it shows. The console prints "start" when a drag begins and "update" when the order changes.

<template>
  <div ref="el">
    <div v-for="item in list" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useDraggable } from 'vue-draggable-plus'

const el = ref<HTMLElement | null>(null)
const list = ref([
  { name: 'Joao', id: 1 },
  { name: 'Jean', id: 2 },
  { name: 'Johanna', id: 3 },
  { name: 'Juan', id: 4 }
])
const draggable = useDraggable(el, list, {
  animation: 150,
  onStart() {
    console.log('start')
  },
  onUpdate() {
    console.log('update')
  }
})
</script>

The returned object is the handle you keep. The README names start, destroy and pause as members of it, which is the reason to pick the composable over the component when the list is conditionally interactive.

If you would rather not write a ref at all, the directive form binds the same list and options to the element directly. Note that the README's directive example imports vDraggable and passes a two-item array, the list first and the options second.

<template>
  <div v-draggable="[list, { animation: 150 }]">
    <div v-for="item in list" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { vDraggable } from 'vue-draggable-plus'

const list = ref([
  { name: 'Joao', id: 1 },
  { name: 'Jean', id: 2 }
])
</script>

Where the abstraction leaks: keyed children, options passthrough and the 0.6 line

The package does not remove Sortablejs from your mental model, it only removes the container problem. Every option you pass is a Sortablejs option, and every event you handle is a Sortablejs event typed as SortableEvent imported from sortablejs. When a drag misbehaves, the answer is usually in the upstream documentation, not here.

The README's examples all use :key="item.id". That is not decoration. Sortablejs moves DOM nodes while Vue re-renders from the array, and a key that does not uniquely identify an item is the classic way to get a list that looks right after a drop and then snaps back on the next render. If your data has no stable identity, the wrapper will not invent one.

Version history is the other thing to weigh. The repository's recent releases are 0.5.4 on 2024-10-17, 0.6.0 on 2024-11-14 and 0.6.1 on 2026-03-13. That is a long gap between 0.6.0 and 0.6.1, and the README does not document a migration path between them. Anyone pinning to 0.5.x should read the 0.6.1 release notes rather than assume the jump is cosmetic.

The package is also not a general drag-and-drop library. It reorders lists. Free-form dragging onto a canvas, resizing a panel, or drawing a connection between two nodes are outside what the README describes, and Sortablejs itself is not built for them.

vue-draggable-plus compared with vue-draggable-next and the other vue-draggable packages

vue-draggable-next is the closest name in the search results and the natural comparison. It is also a Sortablejs wrapper for Vue 3, and the difference is the container contract. vue-draggable-plus exists because the earlier wrapper style required the list component to be the direct child of the drag wrapper; vue-draggable-plus instead accepts a selector for the target container, so the drag list can live on any element. If your list root is a plain element you render yourself, that difference does not apply to you and either wrapper will do the job.

The older vue-draggable package is the Vue 2 era answer, and vue-draggable-plus covers Vue 2.7 in the same package as Vue 3, which is the reason to prefer it during a migration: one dependency, one API, both major versions. Below Vue 2.7 the README's stated support (Vue>=v3 or Vue>=2.7) does not reach you.

vue-dnd-kit and FormKit's drag-and-drop appear in the same searches but are a different kind of tool. They are drag-and-drop toolkits rather than list-sorting wrappers, and the README makes no comparison to them, so treat any claim about how they behave as something to check in their own documentation. The same goes for Vue-draggable-resizable, which is about resizing elements, not reordering a list.

Maintenance, licence and what an upgrade costs you

The repository is not archived, and the last push was on 2026-03-13, the same day 0.6.1 was released. The gap before that was 0.6.0 on 2024-11-14, roughly sixteen months. Two releases in that window is a real signal about pace, and it is the thing to check against your own tolerance before you add the dependency to a long-lived product.

The licence is MIT, declared in package.json and shipped in the published files alongside the README. MIT is permissive and places no condition on your own source, but the package wraps Sortablejs, which is a separate project with its own licence, and the README links to it rather than restating its terms. If your legal review covers transitive dependencies, that is the one to look at.

Upgrade cost is contained by the surface area. Options are Sortablejs options, so an upstream change reaches you through the wrapper rather than being redefined by it. What the README does not document is a rollback or migration procedure between minor versions, so pin the version in package.json and read the release notes before moving. The published exports map is the other thing to know: import, require and the UMD default all resolve to different files under dist, so a bundler misconfiguration shows up as an empty module rather than an error.

Editorial conclusion

Adopt vue-draggable-plus if you are on Vue 3 or Vue 2.7 and your list root sits inside a component library that gives you no slot, which is the case the README says the package was written for. Do not adopt it for a Vue 2.6 project, for a drag interaction that is not list reordering, or if you need a release cadence: 0.6.0 shipped 2024-11-14 and 0.6.1 shipped 2026-03-13, so check the issue tracker and the 0.6.1 changelog against your Vue version before you commit.

Frequently asked questions

Official sources

1. Alfred-Skyblue/vue-draggable-plus on GitHub
2. License: MIT
3. Project website
4. README
5. Releases