# david-desmaisons/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/david-desmaisons-vue-draggable).**

20,609 stars · 2,854 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/David-Desmaisons/Vue.Draggable
- Homepage: https://sortablejs.github.io/Vue.Draggable/
- awesome-repositories: https://awesome-repositories.com/repository/david-desmaisons-vue-draggable.md

## Description

Vue.Draggable is a user interface component for Vue that enables drag-and-drop list reordering. It functions as a declarative wrapper for the Sortable.js library, providing a specialized list element that synchronizes the visual order of elements with an underlying data model.

The project supports complex interactive layouts, including the ability to transfer items between multiple containers and clone items during the drag process. It provides mechanisms to restrict drag initiation to specific handle elements and allows for the embedding of static content within the draggable area.

The framework includes capabilities for validating move operations through callback functions and supports the integration of custom components as draggable items.

## Tags

### 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 Vue.js wrapper for Sortable.js to implement flexible drag-and-drop functionality.
- [DOM Manipulation Libraries](https://awesome-repositories.com/f/web-development/browser-integration-utilities/dom-event-handling/dom-manipulation-libraries.md) — Utilizes a third-party sorting library to handle low-level DOM manipulation and physical element reordering.
- [DOM Mutation Synchronization](https://awesome-repositories.com/f/web-development/virtual-dom-reconciliation/virtual-dom-reconciliation/dom-mutation-synchronization.md) — Translates direct DOM mutations from the sorting engine into state updates the framework can track.
- [Vue Component Wrappers](https://awesome-repositories.com/f/web-development/vue-component-wrappers.md) — Wraps the Sortable.js library into a Vue component to provide a declarative API for the framework.

### Part of an Awesome List

- [Drag and Drop](https://awesome-repositories.com/f/awesome-lists/devtools/drag-and-drop.md) — Transforms lists of elements into drag-and-drop interfaces that synchronize with a data model. ([source](https://github.com/david-desmaisons/vue.draggable#readme))
- [UI Components](https://awesome-repositories.com/f/awesome-lists/devtools/ui-components.md) — Drag-and-drop functionality with model synchronization.
- [UI](https://awesome-repositories.com/f/awesome-lists/more/ui.md) — Listed in the “UI组件” section of the Awesome Github Vue awesome list.

### Data & Databases

- [Model-to-DOM Synchronizations](https://awesome-repositories.com/f/data-databases/data-synchronization-configurations/cloud-storage-sync-triggers/browser-sync-storage/model-to-dom-synchronizations.md) — Mirrors the physical DOM order back to the underlying Vue array to keep the data model in sync.

### User Interface & Experience

- [Cross-Container Item Transfer](https://awesome-repositories.com/f/user-interface-experience/cross-container-item-transfer.md) — Supports moving items between different draggable containers to reorganize information across categories.
- [Interactive List Items](https://awesome-repositories.com/f/user-interface-experience/item-lists/interactive-list-items.md) — Implements a specialized list element supporting item cloning, container transfer, and move validation.
- [List Reordering Interfaces](https://awesome-repositories.com/f/user-interface-experience/list-reordering-interfaces.md) — Enables user interfaces where list items are rearranged by dragging to synchronize visual order with data.
- [Library Wrappers](https://awesome-repositories.com/f/user-interface-experience/sortable-lists/library-wrappers.md) — Provides a declarative Vue wrapper for the Sortable.js library to synchronize DOM reordering with reactive data models.
- [Custom Component Injection](https://awesome-repositories.com/f/user-interface-experience/custom-element-renderers/custom-component-injection.md) — Allows the draggable container to be rendered as a specific tag or third-party component with custom properties. ([source](https://github.com/david-desmaisons/vue.draggable#readme))
- [Draggable Custom Components](https://awesome-repositories.com/f/user-interface-experience/custom-element-renderers/custom-component-injection/draggable-custom-components.md) — Enables the creation of complex draggable interfaces using custom Vue components as items.
- [Drag-and-Drop Move Validations](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-move-validations.md) — Provides callback functions to evaluate and either permit or cancel a move request based on custom logic.
- [Custom Drag-and-Drop Tools](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-page-editors/custom-drag-and-drop-tools.md) — Provides a set of tools and APIs for building complex drag-and-drop interfaces with custom handles.
- [Movement Constraints](https://awesome-repositories.com/f/user-interface-experience/element-positioning/movement-constraints.md) — Restricts drag actions to specific handles or validates moves to prevent invalid data placement.
- [Drag Handles](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/drag-operation-controls/drag-handles.md) — Restricts the drag start event to a specific child handle element to prevent accidental movements.
- [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) — Enables the creation of a copy of an item during the drag process instead of moving the original. ([source](https://github.com/david-desmaisons/vue.draggable#readme))