This demo demonstrates custom boundary constraints that prevent dragging
beyond specific limits:
Horizontal Constraints: Element's left edge must stay
between 100px-500px. Red zones show forbidden positions for the
element.
Vertical Constraints: Element's top edge must stay
between 100px-400px. Red zones show forbidden positions for the
element.
Red zones: Show areas where the element cannot be
positioned accounting for its full size (0-100px and 580px+
horizontally, 0-100px and 460px+ vertically)
Auto-scroll: Still works when dragging near container
edges, but respects bounds
Visual Legend
Forbidden Zone
Test Case: Sticky Element Drag with Initial Scroll
Current scroll: 0px
STICKY
Try dragging with scroll = 0, then set scroll = 200px and try again
The sticky element should respect bounds constraints in both cases
Case 1: Horizontal Custom Bounds (customLeftBound: 100px,
customRightBound: 500px)
DRAG H
Case 2: Vertical Custom Bounds (customTopBound: 100px,
customBottomBound: 400px)