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