SortableJS/vue.draggable.next
4,499 stele·558 fork-uri·JavaScript·MIT·5 vizualizărisortablejs.github.io/vue.draggable.next/#/simple↗
Vue.draggable.next
Acest proiect este o bibliotecă UI de tip drag-and-drop și o componentă Vue 3 pentru implementarea listelor sortabile și a interfețelor sincronizate cu starea. Acționează ca un wrapper pentru biblioteca Sortable.js, oferind o componentă de listă sincronizată cu starea care actualizează automat array-ul de date subiacent atunci când elementele sunt reordonate sau mutate.
Biblioteca suportă interfețe drag-and-drop imbricate și organizarea ierarhică a datelor, permițând containerelor drag-and-drop să fie imbricate în interiorul altor elemente mobile pentru a crea structuri pe mai multe niveluri. De asemenea, permite transferul de date pe mai multe coloane, permițând elementelor să fie mutate sau clonate între diferite containere drag-and-drop.
Capabilitățile suplimentare includ utilizarea mânerelor de interacțiune restricționate pentru a iniția mișcarea și capacitatea de a încorpora conținut static, nemobil, într-o listă drag-and-drop. Sistemul urmărește ciclurile de viață ale evenimentelor de drag pentru a declanșa callback-uri atunci când elementele sunt adăugate, eliminate sau repoziționate.
Features
- Library Wrappers - Provides a Vue 3 wrapper for Sortable.js to synchronize DOM changes with reactive state.
- DOM Event State Synchronization - Synchronizes internal reactive data arrays with native DOM changes triggered by an external library.
- Component Event Bridges - Bridges internal Sortable.js events to Vue component events to notify parents of item movements.
- State Synchronization - Ensures the underlying data state remains consistent with the visual order of elements after movement.
- Drag and Drop Libraries - Ships a set of tools for creating interactive interfaces where users move elements between lists.
- Nested Drag Containers - Implements hierarchical drag-and-drop operations allowing draggable containers to be nested within other movable items.
- Drag-and-Drop Row Reorderers - Implements UI components that allow users to manually rearrange the sequence of items via drag-and-drop.
- Visual Order Synchronization - Keeps data arrays in sync with the visual sequence of elements as users rearrange them.
- Hierarchical Draggable Structures - Implements nested draggable structures for managing tree-like data arrangements.
- List Reordering - Provides interactive capabilities for changing the sequence of items within a list via drag and drop.
- List Reordering Components - Provides a UI component specifically designed for the visual rearrangement and state-syncing of items.
- Nested Draggable Lists - Provides a component architecture that supports hierarchical lists where containers are nested inside movable items.
- Draggable - Enables the creation of multi-level hierarchical structures by nesting draggable containers inside other movable items.
- Directive-Based Manipulators - Uses Vue directives to bind the Sortable.js instance to specific DOM elements for direct manipulation.
- Sortable.js Vue Wrappers - Implements a Vue 3 component based on Sortable.js for drag-and-drop reordering of list elements.
- Vue.js Component Development - Developed as a specialized Vue.js component to handle complex drag-and-drop layout interactions.
- Cross-Container Transfers - Enables moving draggable elements between different target containers to organize data.
- Drag Event Callbacks - Provides configuration hooks that execute custom functions during add, remove, or move events.
- Drag Handles - Supports configuring specific handle elements to initiate drag operations instead of the entire item.
- Multi-List Item Transfer - Allows moving or cloning elements between different list containers to organize data across groups.
- Non-Draggable Area Embedding - Provides the ability to insert static, non-movable elements like buttons or footers into a draggable list.
