Swapy for Outsystems

Swapy is a lightweight, framework-agnostic library that transforms any layout into a drag-to-swap one with minimal effort. This Outsystems wrapper integrates Swapy into your apps, enabling seamless drag-and-drop functionality in a modular and extensible way.

Concepts

• Swapy - zone that will contain your slots and items
• SwapySlot - a part of your layout that will contain one (only one) SwapyItem
• SwapyItem - the item that you drag and drop
• SwapyHandle (optional) - if placed inside a SwapyItem, the item will only be draggable from there

Instalation

1. Install the component in your environment
2. Add references to the Swapy, SwapySlot and SwapyItem blocks
3. Go to the CSS block and copy the styles provided (they are not included in the components to give the developer flexibility to decide where to put them)

Basic usage

1. Drag a Swapy block to your screen to create a Swapy Zone
2. Create the necessary SwapySlots to create your layout (give them a unique Id)
3. Place only one SwapyItem inside each Slot

Note: If you're using the SwapyItems inside a list, please include the "disable-virtualization" attribute:

For advanced usage please consult the included demo.

See more information: https://swapy.tahazsh.com/.