Vue.Draggable
Vue drag-and-drop component based on Sortable.js
Overview
The Vue.Draggable is a Vue component (Vue.js 2.0) or directive (Vue.js 1.0) that allows drag-and-drop functionality and synchronization with view model array, based on and offering all features of Sortable.js. It supports touch devices, drag handles, auto-scrolling, drag and drop between different lists, cancellation support, and events reporting for full control. It is compatible with various UI library components like vuetify, element, or vue material, and does not have a jQuery dependency.
Features
- Full Support of Sortable.js Features: Supports touch devices, drag handles, auto-scrolling, drag and drop between lists.
- No jQuery Dependency: Independent of jQuery for functionality.
- HTML and View Model List Sync: Keeps HTML and view model list in sync when dragging and dropping.
- Compatible with Vue.js 2.0 Transition-Group: Supports Vue.js 2.0 transition-group for animations.
- Events Reporting: Provides events for any changes when full control is needed.
- Reuse Existing UI Library Components: Can make UI library components draggable using tag and component data props.
- Vue
Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.
- Bootstrap
Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.
- Vuetify
Vuetify is a no design skills required UI Library with beautifully handcrafted Vue Components.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
