# SortableJS/Vue.Draggable

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/sortablejs-vue-draggable).**

20,626 stars · 2,877 forks · JavaScript · mit

## Links

- GitHub: https://github.com/SortableJS/Vue.Draggable
- Homepage: https://sortablejs.github.io/Vue.Draggable/
- awesome-repositories: https://awesome-repositories.com/repository/sortablejs-vue-draggable.md

## Topics

`component` `drag-and-drop` `vue`

## Description

Vue.Draggable is a component-based library for Vue.js that enables drag-and-drop functionality within web interfaces. It functions as a wrapper for the SortableJS engine, bridging the gap between imperative DOM manipulation and the declarative nature of the Vue.js reactive system. By synchronizing user interface interactions with the underlying data model, it ensures that list reordering and element movement are automatically reflected in the application state.

The library supports complex interaction patterns, including the ability to move items between lists, clone elements using keyboard modifiers, and organize data within nested hierarchies. It provides granular control over user interactions by allowing developers to restrict dragging to specific handle elements, ensuring that drag-and-drop operations do not interfere with other interface components.

Beyond basic reordering, the library facilitates the creation of dynamic layouts, including support for tables and deeply nested structures. It incorporates visual feedback mechanisms by applying animations during list transitions, helping users track element movement within the interface. The package is distributed as a standard Vue.js component, allowing for integration into existing component trees.

## Tags

### User Interface & Experience

- [Drag and Drop Libraries](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries.md) — Implements intuitive drag-and-drop interfaces within Vue applications for reordering and data management.
- [Declarative Component Libraries](https://awesome-repositories.com/f/user-interface-experience/declarative-component-libraries.md) — Provides a declarative component wrapper that bridges imperative drag-and-drop logic with the reactive framework lifecycle.
- [Interaction Libraries](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/general-interaction-frameworks/interaction-libraries.md) — Enables complex interactive interface patterns including nested hierarchies, item cloning, and restricted drag handles for touch-friendly web applications.
- [List Reordering Components](https://awesome-repositories.com/f/user-interface-experience/list-reordering-components.md) — Builds dynamic lists that support reordering, cloning, and moving items while keeping data synchronized.
- [State-Synchronized Bindings](https://awesome-repositories.com/f/user-interface-experience/data-binding-frameworks/state-synchronized-bindings.md) — Ensures visual changes from drag-and-drop interactions are immediately reflected in the application data store.
- [Nested Drag Containers](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries/nested-drag-containers.md) — Enables organizing complex data by moving items into or out of nested containers during drag operations. ([source](https://sortablejs.github.io/Vue.Draggable/))
- [List Transition Animations](https://awesome-repositories.com/f/user-interface-experience/list-transition-animations.md) — Applies smooth visual motion to items during reordering to provide clear feedback during layout changes. ([source](https://sortablejs.github.io/Vue.Draggable/))
- [CSS Transitions](https://awesome-repositories.com/f/user-interface-experience/css-transitions.md) — Leverages browser-native CSS transitions to animate list reordering and layout changes.
- [Drag Handles](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/drag-operation-controls/drag-handles.md) — Limits draggable areas to specific handle elements to prevent accidental movement during user interaction. ([source](https://sortablejs.github.io/Vue.Draggable/))
- [Drag-and-Drop Cloning](https://awesome-repositories.com/f/user-interface-experience/form-builders/builder-item-collapsers/builder-item-managers/drag-and-drop-cloning.md) — Supports duplicating items between lists during drag operations using keyboard modifiers. ([source](https://sortablejs.github.io/Vue.Draggable/))

### Web Development

- [Vue.js Drag-and-Drop Libraries](https://awesome-repositories.com/f/web-development/declarative-drag-and-drop-libraries/vue-js-drag-and-drop-libraries.md) — Provides a declarative drag-and-drop interface that automatically synchronizes list reordering with the underlying Vue.js data model.
- [Reactive Data Binding](https://awesome-repositories.com/f/web-development/reactive-data-binding.md) — Automatically synchronizes the underlying application state whenever the visual order of elements changes.

### Data & Databases

- [Real-time Data Synchronization](https://awesome-repositories.com/f/data-databases/real-time-data-synchronization.md) — Synchronizes the underlying data model in real time as users rearrange items. ([source](https://sortablejs.github.io/Vue.Draggable/))

### Software Engineering & Architecture

- [Centralized State Stores](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/application-layer-architectures/state-management-architectures/centralized-state-stores.md) — Connects drag-and-drop actions to centralized state stores to ensure consistency across the application. ([source](https://sortablejs.github.io/Vue.Draggable/))