# daybrush/moveable

**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/daybrush-moveable).**

10,720 stars · 658 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/daybrush/moveable
- Homepage: https://daybrush.com/moveable/
- awesome-repositories: https://awesome-repositories.com/repository/daybrush-moveable.md

## Topics

`draggable` `groupable` `movable` `moveable` `pinchable` `resizable` `rotatable` `scalable` `snappable` `warpable`

## Description

Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!

## Tags

### User Interface & Experience

- [Multi-Transform Libraries](https://awesome-repositories.com/f/user-interface-experience/desktop-widgets/draggable-resizable-placements/multi-transform-libraries.md) — Is a JavaScript library that makes DOM elements draggable, resizable, scalable, rotatable, warpable, and pinchable via mouse and touch interactions.
- [Directional Rotations](https://awesome-repositories.com/f/user-interface-experience/directional-rotations.md) — Implements CSS-based rotation of selected elements around a custom origin via drag. ([source](https://cdn.jsdelivr.net/gh/daybrush/moveable@master/README.md))
- [DOM Element Association](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-configurations/dom-element-association.md) — Moves elements by mouse or touch input, updating position in real time during drag events. ([source](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md))
- [Real-Time Position Updates](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-configurations/dom-element-association/real-time-position-updates.md) — Moves an element by mouse or touch, updating its position in real time as the user drags. ([source](https://daybrush.com/moveable/storybook/))
- [Element Groupings](https://awesome-repositories.com/f/user-interface-experience/element-groupings.md) — Provides a library that groups multiple DOM elements for simultaneous drag, resize, scale, and rotate transformations. ([source](https://daybrush.com/moveable/storybook))
- [Interactive Transform Groups](https://awesome-repositories.com/f/user-interface-experience/element-groupings/interactive-transform-groups.md) — Ships a library that transforms multiple selected DOM elements as a single group with drag, resize, scale, and rotate operations. ([source](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md))
- [Pinch Transformers](https://awesome-repositories.com/f/user-interface-experience/element-groupings/pinch-transformers.md) — Provides a library that applies combined drag, resize, scale, and rotate to multiple selected elements via a pinch gesture. ([source](https://daybrush.com/moveable/release/latest/doc/Moveable.Pinchable.html))
- [Drag Handles](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/drag-operation-controls/drag-handles.md) — Responds to drag events specifically on moveable control handles for single or grouped targets. ([source](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/src/ables/README.md))
- [Pinch Event Handlers](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/event-handling-architectures/event-handling/pinch-event-handlers.md) — Provides event handling for pinch gesture lifecycle events on single or grouped targets. ([source](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/src/ables/README.md))
- [Element Rotation](https://awesome-repositories.com/f/user-interface-experience/grid-layout-engines/element-rotation.md) — Provides a rotation handle that spins elements around their center via drag interaction. ([source](https://daybrush.com/moveable/storybook))
- [Pinch Transform Operations](https://awesome-repositories.com/f/user-interface-experience/grid-layout-engines/element-rotation/pinch-transform-operations.md) — Scales and rotates target elements using multi-touch pinch gestures. ([source](https://daybrush.com/moveable/storybook))
- [Rotation Handles](https://awesome-repositories.com/f/user-interface-experience/grid-layout-engines/element-rotation/rotation-handles.md) — Provides interactive rotation handles for spinning DOM elements around their center or a pivot point.
- [Element Resizers](https://awesome-repositories.com/f/user-interface-experience/resizable-panes/element-resizers.md) — Provides utilities for resizing DOM elements by dragging edges or corners with real-time event updates.
- [Pinch Transform Operations](https://awesome-repositories.com/f/user-interface-experience/resizable-panes/element-resizers/pinch-transform-operations.md) — Resizes and rotates multiple elements simultaneously using multi-touch pinch gestures. ([source](https://daybrush.com/moveable/))
- [Grid Snapping](https://awesome-repositories.com/f/user-interface-experience/resizable-panes/grid-item-resizers/grid-snapping.md) — Aligns elements to guide lines or grid positions during drag, resize, or rotation operations.
- [Interactive Control Handles](https://awesome-repositories.com/f/user-interface-experience/text-rendering/dom-based-rendering/interactive-control-handles.md) — Renders interactive control handles as DOM elements positioned relative to the target using CSS transforms.
- [Multi-Touch Gesture Systems](https://awesome-repositories.com/f/user-interface-experience/touch-gesture-libraries/multi-touch-gesture-systems.md) — Implements multi-touch gesture systems that translate pinch inputs into simultaneous scale, rotate, resize, and drag operations on elements.
- [Pinch Transformers](https://awesome-repositories.com/f/user-interface-experience/touch-gesture-libraries/multi-touch-gesture-systems/mouse-to-touch-gesture-emulation/touch-to-keyboard-emulators/pinch-transformers.md) — Provides a library that combines drag, resize, scale, and rotate into a single multi-touch pinch gesture. ([source](https://cdn.jsdelivr.net/gh/daybrush/moveable@master/README.md))
- [Pinch Gesture Decomposition](https://awesome-repositories.com/f/user-interface-experience/touch-gesture-libraries/multi-touch-gesture-systems/pinch-gesture-decomposition.md) — Separates multi-touch pinch input into simultaneous drag, scale, and rotate components for combined transforms.
- [Pinch Transform Libraries](https://awesome-repositories.com/f/user-interface-experience/touch-gesture-libraries/multi-touch-gesture-systems/pinch-transform-libraries.md) — Provides a library enabling multi-touch pinch gestures to simultaneously drag, resize, scale, and rotate DOM elements.
- [Touch Gesture Recognition Libraries](https://awesome-repositories.com/f/user-interface-experience/touch-gesture-recognition-libraries.md) — Ships a library for detecting multi-touch pinch gestures with start, active, and end lifecycle events. ([source](https://daybrush.com/moveable/release/latest/doc/Moveable.Pinchable.html))
- [Transform Origin Controllers](https://awesome-repositories.com/f/user-interface-experience/transform-origin-controllers.md) — Controls the transform-origin property of elements to enable pivot-based rotation and scaling.
- [Draggable Origins](https://awesome-repositories.com/f/user-interface-experience/transform-origin-controllers/draggable-origins.md) — Provides interactive dragging of the transform origin point for precise control over rotation and scaling pivots. ([source](https://daybrush.com/moveable/release/latest/doc))
- [CSS Matrix Composition](https://awesome-repositories.com/f/user-interface-experience/transformation-matrix-scaling/css-matrix-composition.md) — Combines CSS matrix transforms for drag, resize, scale, rotate, and warp operations on a single element.
- [Group Transform Libraries](https://awesome-repositories.com/f/user-interface-experience/visual-element-transforms/group-transform-libraries.md) — Ships a library that allows multiple DOM elements to be transformed together as a single group with drag, resize, scale, and rotate operations.
- [Pinch Transformers](https://awesome-repositories.com/f/user-interface-experience/visual-element-transforms/pinch-transformers.md) — Provides a library that combines drag, resize, scale, and rotate into a single multi-touch pinch gesture. ([source](https://daybrush.com/moveable/release/latest/doc/Moveable.Pinchable.html))
- [Programmatic Operation Triggers](https://awesome-repositories.com/f/user-interface-experience/badges/external-execution/programmatic-operation-triggers.md) — Provides a mechanism to trigger interaction operations programmatically via external requests. ([source](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/src/ables/README.md))
- [Interactive Corner Rounding](https://awesome-repositories.com/f/user-interface-experience/button-styles/round/rounded-corner-shapes/interactive-corner-rounding.md) — Provides interactive corner rounding via drag handles on selected elements. ([source](https://cdn.jsdelivr.net/gh/daybrush/moveable@master/README.md))
- [Element Clipping Handles](https://awesome-repositories.com/f/user-interface-experience/canvas-clipping-utilities/circular-clipping/element-clipping-handles.md) — Crops a selected element by dragging its clipping handles to reveal only a portion of it. ([source](https://cdn.jsdelivr.net/gh/daybrush/moveable@master/README.md))
- [Custom Control Renderers](https://awesome-repositories.com/f/user-interface-experience/layout-utilities/presentation-engines/template-engines/server-side-rendering-engines/html-template-renderers/custom-element-renderers/custom-control-renderers.md) — Provides a mechanism for rendering custom DOM elements inside the moveable area using a provided renderer and CSS-in-JS. ([source](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/src/ables/README.md))
- [Pinch Gesture End Detection](https://awesome-repositories.com/f/user-interface-experience/touch-gesture-detection/pinch-gesture-end-detection.md) — Fires events when multi-touch pinch gestures on groups of selected elements finish. ([source](https://daybrush.com/moveable/release/latest/doc/Moveable.Pinchable.html))
- [Pinch Gesture Start Detection](https://awesome-repositories.com/f/user-interface-experience/touch-gesture-detection/pinch-gesture-start-detection.md) — Fires events when multi-touch pinch gestures begin on groups of selected elements. ([source](https://daybrush.com/moveable/release/latest/doc/Moveable.Pinchable.html))
- [Pinch Gesture Lifecycle Events](https://awesome-repositories.com/f/user-interface-experience/touch-gesture-handlers/touch-event-processors/coordinate-to-translation-mapping/input-to-action-mappings/gesture-to-action-mappings/pinch-gesture-lifecycle-events.md) — Fires start, active, and end events for single-element and group pinch interactions to enable custom logic at each phase. ([source](https://daybrush.com/moveable/release/latest/doc/Moveable.Pinchable.html))

### Artificial Intelligence & ML

- [Custom Interaction Modules](https://awesome-repositories.com/f/artificial-intelligence-ml/custom-model-definitions/custom-agent-flow-definitions/yaml-defined-agents/custom-interaction-modules.md) — Provides a plugin system for defining custom interaction modules with lifecycle hooks for drag, pinch, and render operations. ([source](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/src/ables/README.md))

### Part of an Awesome List

- [Drag and Resize Functionality](https://awesome-repositories.com/f/awesome-lists/devtools/drag-and-drop/drag-and-resize-functionality.md) — Moves a selected DOM element by dragging it with the mouse or touch input. ([source](https://cdn.jsdelivr.net/gh/daybrush/moveable@master/README.md))

### DevOps & Infrastructure

- [Hierarchical Group Targeting](https://awesome-repositories.com/f/devops-infrastructure/deployment-management/deployment-configuration/dynamic-user-targeting/hierarchical-group-targeting.md) — Implements hierarchical group targeting for applying transforms to multiple selected elements as a single unit. ([source](https://cdn.jsdelivr.net/gh/daybrush/moveable@master/README.md))

### Graphics & Multimedia

- [Grouped Transformations](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/scene-management-systems/scene-initialization/scene-composition/grouped-transformations.md) — Moves, resizes, scales, or rotates several selected elements together as a single group. ([source](https://cdn.jsdelivr.net/gh/daybrush/moveable@master/README.md))
- [DOM Element Group Transforms](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/scene-management-systems/scene-initialization/scene-composition/grouped-transformations/dom-element-group-transforms.md) — Applies simultaneous transforms to multiple selected elements by computing relative offsets and scaling factors.
- [Interactive Group Transforms](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/scene-management-systems/scene-initialization/scene-composition/grouped-transformations/interactive-group-transforms.md) — Provides a library that applies drag, resize, scale, and rotate operations to multiple selected DOM elements as a single group. ([source](https://cdn.jsdelivr.net/gh/daybrush/moveable@master/README.md))
- [Pinch Transformers](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/scene-management-systems/scene-initialization/scene-composition/grouped-transformations/pinch-transformers.md) — Provides a library that applies combined drag, resize, scale, and rotate to multiple selected elements via a single pinch gesture. ([source](https://daybrush.com/moveable/release/latest/doc/Moveable.Pinchable.html))
- [Perspective Warping](https://awesome-repositories.com/f/graphics-multimedia/perspective-warping.md) — Provides a library that distorts DOM elements by dragging corner points to create perspective or skew effects using 3D matrix transforms.
- [DOM Element Warping](https://awesome-repositories.com/f/graphics-multimedia/perspective-warping/dom-element-warping.md) — Enables interactive perspective warping of DOM elements by dragging corner handles for 3D distortion effects. ([source](https://daybrush.com/moveable/storybook/))
- [Snap Alignment Libraries](https://awesome-repositories.com/f/graphics-multimedia/precision-alignment-tools/snap-alignment-libraries.md) — Ships a library that snaps elements to guide lines or grid positions during drag, resize, or rotation for precise alignment.

### Scientific & Mathematical Computing

- [Alignment Guide Computation](https://awesome-repositories.com/f/scientific-mathematical-computing/spatial-calculation-utilities/spatial-snapping-utilities/alignment-guide-computation.md) — Computes alignment guides by comparing target edges and centers against container and sibling element positions.

### Software Engineering & Architecture

- [Drag Lifecycle Events](https://awesome-repositories.com/f/software-engineering-architecture/event-driven-architectures/drag-lifecycle-events.md) — Manages transform state through a sequence of drag-start, drag, and drag-end events with interrupt handling.
- [Able-Based Interaction Modules](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/plugin-module-systems/modular-plugin-architectures/plugin-based-architectures/plugin-based-architectures/able-based-interaction-modules.md) — Defines interaction modules as pluggable 'ables' with lifecycle hooks for drag, pinch, and render operations.
- [Custom Interaction Modules](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/foundational-theory-and-guidance/software-architecture-principles/user-experience-design/interaction-design-patterns/interaction-customizers/custom-interaction-modules.md) — Provides a plugin system for defining custom interaction modules with lifecycle hooks for drag, pinch, and render operations.

### System Administration & Monitoring

- [Pinch Transformers](https://awesome-repositories.com/f/system-administration-monitoring/resolution-scaling-tools/touch-target-scaling/pinch-transformers.md) — Provides a library that scales, rotates, resizes, and drags a target simultaneously using multi-touch pinch gestures. ([source](https://daybrush.com/moveable/release/latest/doc))
- [Interactive Scaling](https://awesome-repositories.com/f/system-administration-monitoring/resource-usage-limiters/scaling-targets/interactive-scaling.md) — Provides interactive scaling of DOM elements via drag handles. ([source](https://daybrush.com/moveable/storybook))

### Web Development

- [DOM Element Manipulators](https://awesome-repositories.com/f/web-development/dom-element-manipulators.md) — Moves DOM elements by mouse or touch input, updating their position in real time for interactive layouts.
- [Interactive Scaling](https://awesome-repositories.com/f/web-development/dom-element-manipulators/interactive-scaling.md) — Provides interactive scaling of DOM elements via drag handles.
- [Interactive Scaling](https://awesome-repositories.com/f/web-development/sizing-unit-systems/relative-layout-dimensions/element-sizing/interactive-scaling.md) — Provides interactive scaling of DOM elements via drag handles. ([source](https://daybrush.com/moveable))