SwapyJavaScript tool to convert any layout to a drag-to-swap one

Swapy: Framework-Agnostic Drag-to-Swap Layout Tool

Introduction

Swapy is a powerful, framework-agnostic tool that transforms any layout into a drag-to-swap interface with minimal code. It offers seamless integration across all frameworks, including React, Vue, and Svelte.

Key Features

• Framework-agnostic implementation
• Simple installation via package managers or CDN
• Customizable slot and item specification
• Flexible handle definition for drag operations
• Multiple animation options (dynamic, spring, none)
• Event listening for swap operations
• Versatile order representation (map, object, array)

Use Cases

• Rearranging UI components
• Customizable dashboards
• Interactive content management systems
• User-defined layouts in web applications

Implementation

1. Install Swapy using a package manager or CDN.
2. Specify slots and items in your HTML using data attributes.
3. Initialize Swapy with your container element.
4. Optionally, add event listeners for swap operations.

Code Examples

import { createSwapy } from 'swapy'

const container = document.querySelector('.container')
const swapy = createSwapy(container, {
  animation: 'dynamic'
})

swapy.onSwap((event) => {
  console.log(event.data.object)
  console.log(event.data.array)
  console.log(event.data.map)
})

Framework Integration

Swapy provides examples for integration with popular frameworks:

• React: examples/react
• Vue: examples/vue
• Svelte: examples/svelte

Support

If you find Swapy useful, consider giving it a star on GitHub.