Pragmatic Drag and Drop 迁移指南：拖拽样式差异解析

在从 react-beautiful-dnd 迁移到 @atlaskit/pragmatic-drag-and-drop 的过程中，开发者可能会注意到拖拽样式存在明显差异。本文将从技术实现角度分析这一现象，并给出解决方案。

核心问题现象

当在相同列内进行卡片重排序时，新版库默认不会显示 react-beautiful-dnd 中常见的视觉反馈效果（如蓝色引导线或元素间隔）。这种差异主要源于两个库在视觉反馈机制上的不同设计理念。

技术原理分析

react-beautiful-dnd 采用自动化的视觉反馈系统，而 pragmatic-drag-and-drop 则更倾向于将控制权交给开发者。这种设计差异体现在：

1. 占位符机制：新版库需要显式声明 {provided.placeholder} 才能激活位置指示器
2. 动画系统：react-beautiful-dnd 内置了丰富的过渡动画，而新库需要开发者自行实现
3. 视觉层分离：新库将拖拽逻辑与视觉效果解耦，提高了定制灵活性

解决方案实现

要恢复类似的视觉反馈，开发者需要：

<Droppable droppableId="column">
  {(provided) => (
    <div ref={provided.innerRef}>
      {items.map((item) => (
        <Draggable key={item.id} draggableId={item.id}>
          {(provided) => (
            <div
              ref={provided.innerRef}
              {...provided.draggableProps}
              {...provided.dragHandleProps}
            >
              {item.content}
            </div>
          )}
        </Draggable>
      ))}
      {provided.placeholder} // 关键占位符声明
    </div>
  )}
</Droppable>

进阶样式定制

对于追求更丰富视觉效果的情况，开发者可以：

1. 通过 CSS 自定义占位符样式
2. 使用 transform 实现平滑的位置过渡
3. 结合 React state 实现拖拽过程中的元素高亮
4. 添加阴影/透明度变化增强拖拽感知

设计哲学差异

这种变化反映了现代前端库的设计趋势：

• 从"全自动"到"可控式"的转变
• 核心功能与视觉表现的分离
• 更强调开发者的定制能力

理解这一设计理念有助于更好地运用 pragmatic-drag-and-drop 的强大功能。

最佳实践建议

1. 始终包含 provided.placeholder
2. 考虑添加自定义过渡动画
3. 在复杂场景中结合使用 CSS transform
4. 针对移动端优化触觉反馈