zoom_in Click to enlarge

Vue.Draggable

▲ ▼

language

description Vue.Draggable Overview

Vue.Draggable provides a simple way to add drag-and-drop capabilities to Vue.js applications using the SortableJS library. This component facilitates reordering lists and rearranging items within user interfaces. It’s particularly useful for developers building interactive data displays, sortable tables, or any application requiring intuitive item manipulation. The component is designed for ease of integration and offers a reliable drag-and-drop experience.

help Vue.Draggable FAQ

Is Vue.Draggable still maintained in 2024 and 2025 with Vue 3?

The original `vuedraggable` package was built primarily for Vue 2 and its maintenance has slowed significantly, which has caused issues for Vue 3 users. The community has largely shifted to the `vuedraggable@next` fork or to `sortablejs-vue3` for Vue 3 compatibility.

How do I install Vue.Draggable for a Vue 3 project?

For Vue 3 projects, install `vuedraggable@next` via npm, which is the Vue 3-compatible version that wraps SortableJS. Import the `draggable` component in your script and use it inside a Vue 3 template with the Composition API or Options API.

Can Vue.Draggable handle nested lists for drag-and-drop between groups?

Yes, Vue.Draggable supports the `group` configuration option (inherited from SortableJS), which allows items to be dragged between multiple list instances. You can build tree views and kanban boards by setting the same `group` name on connected draggable components.

What is the underlying library that Vue.Draggable is built on?

Vue.Draggable is a Vue.js wrapper around SortableJS, a vanilla JavaScript drag-and-drop library. This means all of SortableJS's configuration options (like `animation`, `ghostClass`, `chosenClass`, and `group`) can be passed through as props on the Vue component.

swap_horiz

Looking for Vue.Draggable alternatives? Compare top competitors ranked & scored

arrow_forward