@eleung/react-grid-layout

Example #24

Basic Flex Layout

Introduction to ReactFlexLayout with flexbox-based layouts

Example #25

Flex Layout Directions

Explore different flex directions and alignment options

Example #26 NEW

Grid ↔ Flex Drag and Drop

Drag items between grids and flex layouts with automatic transformation

Example #27 NEW

Flex ↔ Flex + Droppable

Flex layouts with external droppable containers

Example #28 NEW

Comprehensive Drag & Drop

All drag combinations: Grid↔Grid, Flex↔Flex, Grid↔Flex, all→External

Example #0

Showcase

Feature overview and demonstration

Example #1

Basic

Simple grid with draggable and resizable items

Example #2

No Dragging/Resizing

Layout only, no interaction

Example #3

Messy Layout Autocorrect

Automatic layout correction and compaction

Example #4

Layout Defined on Children

Using data-grid attribute

Example #5

Static Elements

Mix of movable and fixed items

Example #6

Adding/Removing Elements

Dynamic item management

Example #7

Saving Layout to LocalStorage

Persist layouts across sessions

Example #8

Responsive LocalStorage

Save responsive layouts

Example #9

Min/Max Width/Height

Size constraints on items

Example #10

Dynamic Min/Max

Change constraints dynamically

Example #11

No Vertical Compacting

Free movement without auto-packing

Example #12

Prevent Collision

Items can't overlap or move others

Example #13

Error Case

Error handling demonstration

Example #14

Toolbox

Drag items from a toolbox

Example #15

Drag From Outside

Add items by dragging from external source

Example #16

Bounded Layout

Items constrained within container

Example #17

Responsive Bootstrap-style

Bootstrap-like breakpoints

Example #18

Scaled Containers

Transform scale support

Example #19

Allow Overlap

Items can overlap each other

Example #20

All Resizable Handles

8 directional resize handles

Example #21

Single Row Horizontal

Horizontal compaction mode

Example #22

Cross-Grid Drag and Drop

Drag items between multiple grids

Example #23

External Droppable Containers

Custom drop zones outside grids