Drag Demo - Draggable, DropZone, Resizable, Rotatable

Demo Information

Behaviors demonstrated:

• Draggable: Drag items with constraints and bounds
• DropZone: Drop zones accept draggable items
• Resizable: Resize with corner and edge handles
• Rotatable: Rotate by dragging from center

Try this:

• Green box (top-left): Drag freely, will snap to grid when released
• Teal box (top): Extra free-drag item (used for selective drop zone)
• Blue box (top-center): Drag horizontally only
• Red box (top-right): Drag vertically only
• Drop Zone 1 (left): Accepts all draggable boxes
• Drop Zone 2 (right): Accepts only the teal "Special" box
• Teal box drop rule: Must be dropped in a valid drop zone or it snaps back
• Drop zones: Border color shows hover state (acceptable vs not acceptable)
• Orange box (bottom-right): Drag corners/edges to resize
• Purple circle (center-right): Drag the ring to rotate

Event Log: