用途:GSAP Draggable 为 DOM 元素提供拖拽、抛掷(惯性)、旋转与边界约束交互,适合滑块、拼图、游戏和交互式 UI 组件。
安装与注册:npm install gsap;通过 import { Draggable } from 'gsap/Draggable' 与 import { InertiaPlugin } from 'gsap/InertiaPlugin' 引入,并用 gsap.registerPlugin(Draggable, InertiaPlugin) 注册。启用惯性必须注册 InertiaPlugin。
主要能力:用 Draggable.create(target, options) 创建实例。type 支持 'x,y'、'x'、'y'、'left,top' 与 'rotation'。bounds 可用选择器、矩形对象、部分约束、相对值(如 '-=100')及旋转角度范围。inertia: true 开启抛出,可配置 resistance、minDuration/maxDuration、edgeResistance,并用 autoScroll 在触边时滚动容器。liveSnap 支持吸附到步长、数值数组、函数或带 radius 的点。回调包括 onPress、onRelease、onDragStart、onDrag、onDragEnd、onClick,以及 onThrowUpdate、onThrowComplete;可通过 this.x、this.y、this.deltaX、this.startX、this.pointerX 等访问拖拽数据,用 InertiaPlugin.getVelocity(target, 'x') 获取速度。可批量创建(数组或 NodeList),并对单个实例调用 enable()/disable()。minimumMovement 与 dragClickables 用于区分点击和拖拽。
性能与限制:建议使用 x,y 而非 left,top 以获得更好的性能;bounds 容器需设置 position,否则边界不生效;旋转需设置 transformOrigin,否则会绕错误点旋转;使用 inertia 时必须注册 InertiaPlugin。资料未提供收费、价格与平台支持等细节。