Drag Reference Element Demo

This demo tests drag operations where the reference element (what you click/drag) is in a different positioning context from the element (what actually moves).

Reference Element (click to drag)
Element (moves when dragging reference)

Test Scenarios:

Case 1: Document Scroll Container, Different Positioned Parents

REF
ELEMENT

Instructions

Click and drag the orange REF element to move the green ELEMENT. Both elements are in the document (same scroll container) but have different positioned parents.

Drag Down
Ready - Click orange REF to drag green ELEMENT (same scroll, different parents)

Case 2: Reference in Scroll Container, Element in Document

REF
ELEMENT

Instructions

Click and drag the orange REF element (in scroll container) to move the green ELEMENT (in document). Tests cross-coordinate system drag operation.