React中如何为带有CSS transform动画的组件实现拖拽功能

问题根本原因 #

react-draggable 实现拖拽的核心原理是动态修改目标元素的 transform 属性来控制位移，而你定义的 CSS 动画也在持续修改同一个元素的 transform 属性，且CSS动画的样式优先级高于行内样式，导致拖拽生成的位移属性被覆盖，因此无法正常拖动。

另外注意你提供的CSS代码里存在语法错误：. theComponent 类名前多了空格，需要修正为 .theComponent，否则样式不会生效。

方案1：拆分动画和拖拽控制的元素层级 #

不要把动画样式直接应用在Draggable的直接子元素上，将动画移到内层或外层独立节点，避免两者同时修改同一个元素的transform属性。
修改后的代码示例：

// JSX部分调整
class DragMe extends React.Component {
  render() {
    return (
      <Draggable
        axis="both"
        handle=".handle"
        defaultPosition={{ x: 0, y: 0 }}
        position={null}
        grid={[25, 25]}
        scale={1}
        onStart={this.handleStart}
        onDrag={this.handleDrag}
        onStop={this.handleStop}
      >
        {/* 该节点仅受Draggable控制，不应用动画 */}
        <div className="handle">
          {/* 动画样式移到内层节点 */}
          <div className={theComponent}>
            <p>Drag Me!</p>
          </div>
        </div>
      </Draggable>
    );
  }
}

.theComponent{
  animation: moveAnimation 3.5s infinite;
}

@keyframes moveAnimation {
  0%,
  100% {
    transform: translate(-200%, 20%);
  }
  50% {
    transform: translate(-200%, 25%);
  }
}

方案2：拖拽过程中暂停动画 #

拖拽开始时暂停CSS动画，拖拽结束后恢复，避免两者的transform属性冲突：

/* 新增拖拽状态的样式 */
.theComponent.dragging {
  animation-play-state: paused;
  /* 也可以根据需求直接停掉动画：animation: none; */
}

// JSX部分新增状态控制
class DragMe extends React.Component {
  state = {
    isDragging: false
  }
  handleStart = () => {
    this.setState({isDragging: true})
    // 其他原有逻辑
  }
  handleStop = () => {
    this.setState({isDragging: false})
    // 其他原有逻辑
  }
  // 其他原有方法
  render() {
    const cls = `${theComponent} handle ${this.state.isDragging ? 'dragging' : ''}`
    return (
      <Draggable
        axis="both"
        handle=".handle"
        defaultPosition={{ x: 0, y: 0 }}
        position={null}
        grid={[25, 25]}
        scale={1}
        onStart={this.handleStart}
        onDrag={this.handleDrag}
        onStop={this.handleStop}
      >
        <div className={cls}>
          <p>Drag Me!</p>
        </div>
      </Draggable>
    );
  }
}

方案3：叠加动画和拖拽位移（需同时保留动画和拖拽效果时用） #

通过CSS变量叠加动画位移和拖拽位移，避免属性冲突：

.theComponent{
  animation: moveAnimation 3.5s infinite;
}

@keyframes moveAnimation {
  0%,
  100% {
    /* 加入拖拽位移的CSS变量 */
    transform: translate(calc(-200% + var(--drag-x, 0px)), calc(20% + var(--drag-y, 0px)));
  }
  50% {
    transform: translate(calc(-200% + var(--drag-x, 0px)), calc(25% + var(--drag-y, 0px)));
  }
}

// JSX部分自定义拖拽逻辑，修改CSS变量而不是用Draggable默认的transform修改
class DragMe extends React.Component {
  handleDrag = (e, data) => {
    const node = e.currentTarget
    node.style.setProperty('--drag-x', `${data.x}px`)
    node.style.setProperty('--drag-y', `${data.y}px`)
  }
  // 其他原有方法
  render() {
    return (
      <Draggable
        axis="both"
        handle=".handle"
        defaultPosition={{ x: 0, y: 0 }}
        position={null}
        grid={[25, 25]}
        scale={1}
        onStart={this.handleStart}
        onDrag={this.handleDrag}
        onStop={this.handleStop}
      >
        <div className={theComponent + " handle"}>
          <p>Drag Me!</p>
        </div>
      </Draggable>
    );
  }
}

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