如何让GreenSock Draggable与onClick事件同时正常工作？

这个问题我之前做类似的GreenSock导航组件时也遇到过——本质是两种交互的状态没有同步，加上动画冲突导致的位置错乱。下面是我亲测有效的解决方案：

1. 统一状态管理，避免状态脱节 #

首先要维护一个全局状态对象，让拖动和点击交互都基于这个唯一的状态源，彻底避免各自维护状态导致的不一致：

// 全局状态，记录时钟的核心参数
const clockState = {
  currentAngle: 0, // 当前实时旋转角度
  targetAngle: 0, // 对应内容的目标对齐角度
  isAnimating: false, // 是否正在执行过渡动画
  isDragging: false // 是否处于拖动状态
};

2. 重构拖动交互：中断冲突动画，同步状态 #

使用GreenSock的Draggable插件时，要在拖动开始时立即停止当前可能在运行的点击动画，拖动过程中实时更新全局状态的角度值，拖动结束后自动对齐到最近的目标内容角度：

Draggable.create('#clock-button', {
  type: 'rotation',
  bounds: { minRotation: 0, maxRotation: 360 }, // 可选：限制旋转范围
  onDragStart: function() {
    clockState.isDragging = true;
    gsap.killTweensOf('#clock-button'); // 终止正在进行的点击动画
    clockState.isAnimating = false; // 重置动画状态
  },
  onDrag: function() {
    // 拖动过程中实时同步当前角度
    clockState.currentAngle = this.rotation;
  },
  onDragEnd: function() {
    clockState.isDragging = false;
    // 计算最近的目标角度（假设每个内容对应90度间隔，可按需调整）
    const nearestTarget = Math.round(clockState.currentAngle / 90) * 90;
    // 处理角度循环（避免超过360或出现负数）
    clockState.targetAngle = (nearestTarget % 360 + 360) % 360;
    
    // 平滑过渡到目标角度
    gsap.to('#clock-button', {
      rotation: clockState.targetAngle,
      duration: 0.3,
      onStart: () => clockState.isAnimating = true,
      onUpdate: function() {
        // 动画过程中持续同步当前角度
        clockState.currentAngle = this.targets()[0]._gsTransform.rotation;
      },
      onComplete: () => {
        clockState.isAnimating = false;
        switchContent(clockState.targetAngle); // 执行内容切换逻辑
      }
    });
  }
});

3. 重构点击交互：拦截冲突操作，基于全局状态计算目标 #

点击时先判断是否正在拖动或执行动画，如果是就直接拦截，避免冲突；否则基于当前全局状态计算下一个目标角度，执行动画并同步状态：

document.querySelector('#clock-button').addEventListener('click', () => {
  // 正在拖动或动画中时，不响应点击
  if (clockState.isDragging || clockState.isAnimating) return;
  
  clockState.isAnimating = true;
  // 计算下一个目标角度（每次点击旋转90度，可按需调整）
  clockState.targetAngle = (clockState.targetAngle + 90) % 360;
  
  gsap.to('#clock-button', {
    rotation: clockState.targetAngle,
    duration: 0.3,
    onUpdate: function() {
      // 动画过程中持续同步当前角度
      clockState.currentAngle = this.targets()[0]._gsTransform.rotation;
    },
    onComplete: () => {
      clockState.isAnimating = false;
      switchContent(clockState.targetAngle); // 执行内容切换逻辑
    }
  });
});

4. 关键注意事项 #

• 状态优先：所有交互和动画都必须基于clockState的数值，不能直接操作DOM元素的rotation属性，彻底避免状态脱节。
• 冲突拦截：在每种交互开始前，都要检查是否有其他交互或动画在进行，及时中断或拦截。
• 角度循环处理：用取模运算处理角度的360度循环，避免角度数值无限增大导致计算错误。

这样修改后，不管是先点击再拖动，还是先拖动再点击，时钟按钮都会基于统一的状态正确切换位置，不会出现错乱的问题。

内容的提问来源于stack exchange，提问作者amsterfran