SuperAPI AI 工具集

gsap-draggable

智能体与模型

查看项目

更新于 10-16 00:30

技能介绍

用途:GSAP Draggable 让任意 DOM 元素支持拖拽、旋转、抛掷(惯性)交互,常用于滑块、拼图、游戏和交互式 UI 组件。需配合 InertiaPlugin 使用惯性功能。

安装与注册: npm install gsap import { Draggable } from 'gsap/Draggable' import { InertiaPlugin } from 'gsap/InertiaPlugin' gsap.registerPlugin(Draggable, InertiaPlugin)

主要能力:通过 Draggable.create(target, options) 创建实例。type 支持 'x,y'、'x'、'y'、'left,top'、'rotation'。bounds 可用选择器、矩形范围(minX/maxX/minY/maxY)、相对值(如 '-=100')或旋转范围(minRotation/maxRotation)。inertia: true 启用抛掷,可配置 resistance、minDuration、maxDuration、edgeResistance,配合 autoScroll 实现边缘自动滚动。liveSnap 支持吸附到数值、数组、函数或带 radius 的点集。回调包括 onPress、onRelease、onClick、onDragStart、onDrag、onDragEnd、onThrowUpdate、onThrowComplete,可在回调中读取 this.x、this.y、deltaX、deltaY、startX、startY、pointerX、pointerY,并用 InertiaPlugin.getVelocity(target, 'x') 获取速度。支持传入选择器数组或 NodeList 批量创建,也可对单个实例 enable/disable。

必要用法与限制:旋转需先用 gsap.set 设置 transformOrigin,否则旋转中心错误。使用 bounds 时容器需设 position,元素通常设 position: absolute。惯性必须注册 InertiaPlugin。性能上建议用 x,y 而非 left,top。可用 minimumMovement 区分点击与拖拽。资料未提供官方价格、收费与平台支持等信息。