A simple JavaScript tool for converting any layout you have to drag-to-swap layout
Framework-Agnostic
Works seamlessly with all frameworks including React, Vue, and Svelte.
Easy Installation
Install with a package manager or via CDN with minimal setup.
Flexible Item Handling
Allows customization of drag handles and styling of selected slots.
Event Listening
Provides detailed event data to track and store new item orders after swaps.
Swapy is a powerful and user-friendly tool that transforms any existing layout into an interactive drag-to-swap interface. With just a few lines of JavaScript code, developers can enhance their web applications by allowing users to rearrange items dynamically. The tool is designed to be highly flexible, supporting a variety of layouts and configurations, making it suitable for both simple and complex applications.
Swapy can be installed using package managers like pnpm or directly from a CDN. It operates by defining slots and items through specific data attributes, and it supports dynamic animations along with options for customization.
Creating customizable dashboards where users can rearrange widgets.
Implementing interactive to-do lists that allow users to prioritize tasks by dragging.
Designing e-commerce product grids where users can organize items based on preference.
You can install Swapy using a package manager like pnpm or by including it via a CDN link.
Yes, you can specify drag handles by using the data attribute data-swapy-handle.
Swapy is framework-agnostic and works with all major frameworks including React, Vue, and Svelte.
