Chapter 190: Draggable (Overview)

Core Idea

Draggable makes virtually any DOM element draggable, spinnable, tossable, or flick-scrollable via mouse/touch, and integrates with InertiaPlugin for momentum-based deceleration after a flick.

Code Examples

gsap.registerPlugin(Draggable);

Draggable.create("#yourID", { type: "x" });

• What it demonstrates: minimal setup — registering the plugin, then making one element horizontally draggable.

Key Takeaways

1. type controls what's being dragged: "x,y", "top,left", "x"/"y" (single axis), "rotation", or "scroll"/"scrollTop"/"scrollLeft".
2. Every method/property covered in this section (create(), get(), bounds, inertia-related fields) operates on Draggable instances created this way.

Connects To

• InertiaPlugin: provides the momentum/throw physics used when inertia: true.
• Draggable.create(): the actual instance-creation method (this overview uses it directly).