Plugin

Draggable + Inertia

拖曳、旋轉、邊界限制；搭配 InertiaPlugin 鬆手後有動量滑行。

導讀

滑桿、卡片堆、旋鈕都靠 Draggable。inertia: true 需要同時 register InertiaPlugin。

看什麼
拖 x,y box 與旋轉 knob；放開後是否繼續滑一段。
怎麼試
開關 inertia、調 edgeResistance 與 bounds。
Skill 對應：Draggable.create, type, bounds, inertia, edgeResistance
  • type: "x,y" 或 "rotation"、"x" 等
  • bounds 限制在容器內；edgeResistance 越界阻力 0–1
  • inertia: true 需要同時 registerPlugin(InertiaPlugin)
  • 卸載時 Draggable.get(el)?.kill()
gsap.registerPlugin(Draggable, InertiaPlugin);
Draggable.create(".box", {
  type: "x,y",
  bounds: "#arena",
  inertia: true,
  edgeResistance: 0.65
});
Draggable
拖
旋

左：x,y 拖曳 · 右：rotation 旋鈕 · 右下 HUD 顯示數值

box x / y
0 / 0
knob rotation
0°