# desandro/draggabilly

**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/desandro-draggabilly).**

_How this analysis was created: the description and tags below were written by an AI model that read this project's README and public documentation pages; stars, license and language come straight from the GitHub API. The model does not read the source code._

3,871 stars · 380 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/desandro/draggabilly
- Homepage: https://draggabilly.desandro.com
- awesome-repositories: https://awesome-repositories.com/repository/desandro-draggabilly.md

## Description

Draggabilly is a JavaScript drag and drop library used to make DOM elements draggable on desktop and mobile. It serves as a coordinate-based UI tool and interaction library for tracking and setting the horizontal and vertical positions of interface elements during user interaction.

The library provides a mobile-ready touch handler that converts mouse and touch movements into element translation. It includes specialized capabilities for restricting movement to specific axes or container boundaries and implements grid snapping to align elements to a predefined pixel grid.

The tool manages the drag lifecycle through event listeners that distinguish static clicks from drag gestures and supports the use of specific drag handles to restrict interaction triggers. It also provides utilities for programmatically controlling draggable instances, including the ability to enable, disable, or retrieve the exact coordinates of an element.

## Tags

### User Interface & Experience

- [Touch and Drag Interactions](https://awesome-repositories.com/f/user-interface-experience/touch-and-drag-interactions.md) — Implements a mobile-ready touch handler that converts touch and mouse movements into smooth element translation.
- [Drag and Drop Libraries](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries.md) — Provides a JavaScript library for making DOM elements draggable on both desktop and mobile devices.
- [Element Positioning](https://awesome-repositories.com/f/user-interface-experience/element-positioning.md) — Provides utilities for setting and retrieving the exact horizontal and vertical coordinates of draggable elements. ([source](https://draggabilly.desandro.com))
- [Movement Constraints](https://awesome-repositories.com/f/user-interface-experience/element-positioning/movement-constraints.md) — Restricts the movement of draggable objects to a single axis or within container boundaries.
- [Mobile Touch Handlers](https://awesome-repositories.com/f/user-interface-experience/input-handling/mobile-touch-handlers.md) — Processes touch events from mobile devices to enable smooth element translation across screen sizes.
- [Interaction Coordinate Utilities](https://awesome-repositories.com/f/user-interface-experience/interaction-coordinate-utilities.md) — Tracks and sets the horizontal and vertical positions of interface elements during user interaction.
- [Interactive UI Components](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-components.md) — Provides tools for creating interactive web elements that can be moved freely via pointer gestures.
- [Movement Boundary Constraints](https://awesome-repositories.com/f/user-interface-experience/movement-boundary-constraints.md) — Implements logic to clamp the position of UI elements within specified boundary dimensions.
- [Pointer Offset Tracking](https://awesome-repositories.com/f/user-interface-experience/pointer-offset-tracking.md) — Calculates element displacement based on the delta between initial and current pointer positions.
- [Drag-Click Differentiation](https://awesome-repositories.com/f/user-interface-experience/click-event-phases/drag-click-differentiation.md) — Distinguishes between a static click and the start of a drag operation using distance thresholds.
- [Click-Drag Differentiation](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries/click-drag-differentiation.md) — Implements logic to distinguish between a static click and the start of a drag operation using temporal delays. ([source](https://draggabilly.desandro.com))
- [Movement Constraints](https://awesome-repositories.com/f/user-interface-experience/element-positioning/movement-constraints/movement-constraints.md) — Restricts movement to a specific axis or clamps elements within the boundaries of a container element. ([source](https://cdn.jsdelivr.net/gh/desandro/draggabilly@master/README.md))
- [Drag Event Callbacks](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/drag-operation-controls/drag-event-callbacks.md) — Provides configuration hooks to trigger events and apply styles during the press, move, and release phases. ([source](https://draggabilly.desandro.com))
- [Drag Handles](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/drag-operation-controls/drag-handles.md) — Supports the definition of specific UI elements to initiate movement for a target object.
- [Drag State Monitors](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/drag-operation-controls/drag-state-monitors.md) — Tracks the drag lifecycle state and element coordinates to run custom logic at specific interaction points. ([source](https://cdn.jsdelivr.net/gh/desandro/draggabilly@master/README.md))
- [DOM Event Listeners](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/event-handling-architectures/event-handling/dom-event-listeners.md) — Attaches listeners to interface elements to execute custom logic during press, move, and release events. ([source](https://draggabilly.desandro.com/))
- [Grid Snapping](https://awesome-repositories.com/f/user-interface-experience/resizable-panes/grid-item-resizers/grid-snapping.md) — Aligns element position to a configurable pixel grid increment during movement.

### Part of an Awesome List

- [Interactive Element Dragging](https://awesome-repositories.com/f/awesome-lists/devtools/drag-and-drop/grid-drag-and-drop-managers/interactive-element-dragging.md) — Enables users to move general UI elements across a screen via mouse drag or touch slide. ([source](https://cdn.jsdelivr.net/gh/desandro/draggabilly@master/README.md))

### Web Development

- [DOM Interactivity Libraries](https://awesome-repositories.com/f/web-development/dom-interactivity-libraries.md) — Provides a set of tools for managing pointer events and movement constraints for HTML elements.

### Graphics & Multimedia

- [Grid Alignment Systems](https://awesome-repositories.com/f/graphics-multimedia/precision-alignment-tools/grid-alignment-systems.md) — Snaps UI elements to predefined pixel grids to ensure consistent and precise alignment.

### Software Engineering & Architecture

- [Pointer State Tracking](https://awesome-repositories.com/f/software-engineering-architecture/event-driven-callbacks/pointer-state-tracking.md) — Updates internal coordinates and triggers callbacks by listening to pointer down, move, and up browser events.