Bootstrap Templates & Themes Logo Bootstrap Templates & Themes
Vue.Draggable screenshot

Vue.Draggable

Author Avatar Theme by Sortablejs
Updated: 5 Oct 2022
20430 Stars

Vue drag-and-drop component based on Sortable.js

Github Live Preview

Categories

Vue Vuetify

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.

Installation

To install Vue.Draggable for Vue 2.0 using npm or yarn, make sure to use the correct package name, which is vuedraggable (not vue-draggable for Vue 1.0). Here is an example of installation using npm:

npm install vuedraggable

For Vue.js 2.0, you can use the draggable component in your .vue file by wrapping the draggable elements directly, using transition-group, manipulating props like value and list, and setting sortable options directly as props.

Summary

Vue.Draggable is a versatile Vue component/directive that provides drag-and-drop functionality with synchronization, offering a wide range of features from Sortable.js. It is well-suited for Vue.js 2.0 applications and can be easily integrated with existing UI libraries. With its comprehensive feature set and compatibility with touch devices and transition groups, Vue.Draggable offers a robust solution for implementing drag-and-drop interactions in Vue.js applications.