# tahash/swapy

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/tahash-swapy).**

8,452 stars · 178 forks · TypeScript · gpl-3.0

## Links

- GitHub: https://github.com/TahaSh/swapy
- awesome-repositories: https://awesome-repositories.com/repository/tahash-swapy.md

## Description

Swapy is a drag and drop layout library designed to manage the spatial arrangement of UI components. It functions as an element reordering tracker and visual position manager that exports updated layout sequences as data objects after user interactions.

The system monitors changes to the visual order of elements to provide updated layout mappings. It enables the rearrangement of on-screen elements through drag and drop interactions to update visual layout mappings.

The library covers dynamic layout management and visual element sorting by converting the visual positions of screen elements into structured data objects for storage or processing. It utilizes coordinate-based mapping and DOM mutation tracking to synchronize visual element orders with data representations.

## Tags

### User Interface & Experience

- [Drag and Drop Libraries](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries.md) — A library for implementing drag-and-drop interactions specifically for updating visual layout mappings.
- [Coordinate-Based Position Calculators](https://awesome-repositories.com/f/user-interface-experience/coordinate-based-position-calculators.md) — Provides logic to determine element positions by calculating spatial coordinates relative to other UI components.
- [Workspace Coordinate Management](https://awesome-repositories.com/f/user-interface-experience/coordinate-based-position-calculators/workspace-coordinate-management.md) — Manages the 2D positions of elements and tracks their coordinates during user interactions.
- [Drag-and-Drop Row Reorderers](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-row-reorderers.md) — Allows users to manually rearrange the sequence of items in a list or grid via drag-and-drop.
- [Dynamic Layout Engines](https://awesome-repositories.com/f/user-interface-experience/dynamic-layout-engines.md) — Provides a framework for constructing interactive layouts that adapt based on visual reordering and configuration.
- [Layout Order Trackers](https://awesome-repositories.com/f/user-interface-experience/layout-order-trackers.md) — Monitors changes in the visual order of elements and exports the updated layout as a data object.
- [Position Serialization](https://awesome-repositories.com/f/user-interface-experience/layout-positioning/position-serialization.md) — Converts the visual positions of screen elements into structured data objects for storage or processing.
- [Data-Driven Layouts](https://awesome-repositories.com/f/user-interface-experience/view-layouts/data-driven-layouts.md) — Translates visual arrangements of elements into structured data objects for easy extraction and storage.
- [Layout Swapping](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries/layout-swapping.md) — Allows users to rearrange layout elements on the screen via drag and drop swapping. ([source](https://cdn.jsdelivr.net/gh/tahash/swapy@main/README.md))
- [Event-Driven State Synchronizers](https://awesome-repositories.com/f/user-interface-experience/event-driven-state-managers/event-driven-state-synchronizers.md) — Synchronizes the internal layout state with the UI based on drag and drop event streams.
- [Interactive Element Sorting](https://awesome-repositories.com/f/user-interface-experience/interactive-element-sorting.md) — Enables users to sort lists or grids by dragging items into a specific visual sequence.
- [Draggable Layout Elements](https://awesome-repositories.com/f/user-interface-experience/interactive-widgets/draggable-layout-elements.md) — Provides UI components that can be repositioned within a layout via drag-and-drop interactions. ([source](https://swapy.tahazsh.com/))
- [DOM Structural Tracking](https://awesome-repositories.com/f/user-interface-experience/viewport-dimension-tracking/element-dimension-tracking/dom-structural-tracking.md) — Monitors DOM mutations to detect when elements are moved or reordered within the document tree.

### Web Development

- [Sequence Indexing](https://awesome-repositories.com/f/web-development/dom-node-positioning/sequence-indexing.md) — Determines the index of an element based on its sequence in the parent container during reordering.