# ducksboard/gridster.js

**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/ducksboard-gridster-js).**

5,981 stars · 1,170 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/ducksboard/gridster.js
- Homepage: http://gridster.net/
- awesome-repositories: https://awesome-repositories.com/repository/ducksboard-gridster-js.md

## Description

Gridster.js is a jQuery plugin that turns page elements into a draggable, resizable grid layout. It provides a framework for building interactive dashboards and interfaces where widgets snap to a multi-column grid and can be repositioned by dragging, with automatic layout reflow when items are added, removed, or resized.

The plugin handles mouse and touch events through a drag-and-drop manager, calculates widget overlap with a collision detection engine, and positions items using CSS transforms for smoother animations. It maintains an internal registry of all grid items with their coordinates and dimensions, divides the container width into equal columns based on a configurable count, and triggers layout recalculation on window resize or widget dimension changes through custom jQuery events.

Gridster.js supports adding and removing widgets at runtime without rebuilding the entire layout, and allows changing the width and height of grid items so the layout reflows automatically. It includes a serialization API that converts the current grid state into a JSON array of widget positions and dimensions for persistence.

## Tags

### Web Development

- [jQuery Plugins](https://awesome-repositories.com/f/web-development/jquery-plugins.md) — Extends jQuery's prototype chain to add grid layout methods directly to DOM element selections.
- [Widget Layout Management](https://awesome-repositories.com/f/web-development/component-based-architectures/component-based-architectures/status-line-layout-engines/widget-layout-management.md) — Manages dynamic addition, removal, and rearrangement of grid widgets at runtime without rebuilding the entire layout.
- [jQuery Grid Widget Libraries](https://awesome-repositories.com/f/web-development/jquery-compatible-libraries/jquery-grid-widget-libraries.md) — Turns page elements into draggable, resizable widgets within a dynamic grid system.
- [Grid Layout Collision Detectors](https://awesome-repositories.com/f/web-development/layout-engines/constraint-based/collision-detection/grid-layout-collision-detectors.md) — Provides a collision detection engine that shifts adjacent widgets to fill gaps during drag operations.

### Part of an Awesome List

- [Dashboard Grid Frameworks](https://awesome-repositories.com/f/awesome-lists/devtools/drag-and-drop/dashboard-grid-frameworks.md) — Provides a framework for building interactive dashboards and interfaces with draggable, resizable grid items.
- [Grid Drag-and-Drop Managers](https://awesome-repositories.com/f/awesome-lists/devtools/drag-and-drop/grid-drag-and-drop-managers.md) — Ships a drag-and-drop manager that handles mouse and touch events for widget repositioning with real-time feedback.
- [jQuery Grid Layout Plugins](https://awesome-repositories.com/f/awesome-lists/devtools/grid-layouts/jquery-grid-layout-plugins.md) — A jQuery plugin for building intuitive, multi-column grid layouts where elements can be dragged and resized.

### User Interface & Experience

- [Draggable Grid Widgets](https://awesome-repositories.com/f/user-interface-experience/grid-layouts/list-layout-arrangements/dynamic-grid-layouts/draggable-grid-widgets.md) — Arranges page elements into a multi-column grid that users can reposition by dragging. ([source](https://cdn.jsdelivr.net/gh/ducksboard/gridster.js@master/README.md))
- [Runtime Widget Inserters and Removers](https://awesome-repositories.com/f/user-interface-experience/interactive-widgets/draggable-layout-elements/runtime-widget-inserters-and-removers.md) — Supports adding and removing widgets at runtime without rebuilding the entire layout. ([source](https://cdn.jsdelivr.net/gh/ducksboard/gridster.js@master/README.md))
- [Snap-to-Grid Draggable Layouts](https://awesome-repositories.com/f/user-interface-experience/interactive-widgets/draggable-layout-elements/snap-to-grid-draggable-layouts.md) — Builds interactive page layouts where elements snap to a multi-column grid and can be repositioned by dragging.
- [Grid Item Resizers](https://awesome-repositories.com/f/user-interface-experience/resizable-panes/grid-item-resizers.md) — Provides interactive handles that allow users to modify the dimensions of individual grid cells with automatic layout reflow. ([source](https://cdn.jsdelivr.net/gh/ducksboard/gridster.js@master/README.md))
- [JavaScript Column Calculators](https://awesome-repositories.com/f/user-interface-experience/column-layout-configurations/vertical-column-layouts/css-column-count-multi-column-layouts/javascript-column-calculators.md) — Divides the container width into equal columns based on a configurable column count and widget sizes.
- [Positioning Transforms](https://awesome-repositories.com/f/user-interface-experience/component-utilities/animation-engines/css-transform-animations/positioning-transforms.md) — Positions grid items using CSS transforms for smoother animations instead of absolute positioning.
- [Grid Layout Resize Event Systems](https://awesome-repositories.com/f/user-interface-experience/navigation-routing/iframe/auto-resizing-iframes/resize-event-callbacks/grid-layout-resize-event-systems.md) — Triggers layout recalculation on window resize and widget dimension changes through custom jQuery events.
- [Dynamic Reflow Grid Builders](https://awesome-repositories.com/f/user-interface-experience/responsive-grid-layouts/dynamic-reflow-grid-builders.md) — Creates flexible, multi-column grid layouts that automatically reflow when elements are added, removed, or resized.
- [Widget Coordinate Registries](https://awesome-repositories.com/f/user-interface-experience/widget-dimension-constraints/widget-coordinate-registries.md) — Maintains an internal registry of all grid items with their coordinates and dimensions for efficient lookups.