Overview:

Revue Draggable is a tool that allows users to make Vue components draggable, offering support for both Vue 2 and Vue 3. With a variety of features including components, directives, and composables, users have the flexibility to choose the level of control they desire over drag events. Inspired by React Draggable, Revue Draggable provides a seamless experience for creating draggable elements in Vue applications.

Features:

• Support for Vue 2 and Vue 3
• Components, directives, and composables available
• Customizable drag events with core abstraction
• Easy setup with DraggableDirective or component wrapper
• Examples for dropping elements, setting boundaries, and syncing states
• Built with Vite for development and Rollup for distribution
• Debugging support with environment variable for enabling logs
• Testing done with Cypress

Installation:

To install Revue Draggable for Vue2, follow these steps:

1. Add the composition-api to your dependencies if you are using Vue < 2.7.
2. Utilize the components with Webpack for Vue2 or Nuxt.
3. Register Revue Draggable using the DraggableDirective for easy setup, or use the component wrapper. (Note: For Vue2, ensure to include the full-build as the runtime-build works for Vue3 only.)

Summary:

Revue Draggable is a versatile tool that simplifies the process of making Vue components draggable. With support for both Vue 2 and Vue 3, users can choose from components, directives, or composables based on their requirements. The tool’s integration with Vite for development and Rollup for distribution ensures a smooth experience, while debugging capabilities and testing with Cypress offer added convenience for Vue developers.