React Beautiful DND拖动卡片时光标与卡片存在间距位置偏移问题

问题现象 #

• 拖动Draggable卡片时，卡片与光标存在明显间距，光标无法贴合被拖动元素
• 承载卡片的列容器自带滚动条，容器发生滚动后再触发拖动，卡片与光标的间距会随滚动距离增大
  

复现代码片段 #

<Draggable key={`${id}`} isDragDisabled={idDisabled} draggableId={JSON.stringify(actionData)} index={index} >
  {(provided, snapshot) => (
    <div
      className={`rx-actions-card-list draggable-card ${moment(dueDate) > moment() ? 'border-left-green' : 'border-left-red'}`}
      ref={provided.innerRef}
      {...provided.draggableProps}
      {...provided.dragHandleProps}
      style={{
        ...provided.draggableProps.style,
      }}
    >

根本原因 #

偏移来自拖拽坐标计算误差：react-beautiful-dnd需要绑定可滚动容器的ref，实时监听滚动事件更新拖拽位置。如果带滚动条的列容器没有正确关联Droppable实例，库无法获取准确的容器滚动偏移量，就会出现拖拽位置和光标位置不匹配的问题，滚动距离越大，偏差值越高。

修复步骤 #

• 检查Droppable绑定位置：必须将Droppable返回的provided.innerRef绑定在设置了overflow: auto/scroll的滚动容器本身，不能绑定在滚动容器的内层子元素上，参考正确写法：

<Droppable droppableId="action-card-column">
  {(provided) => (
    // 该div为带滚动条的列容器，必须在此处绑定ref和droppableProps
    <div
      ref={provided.innerRef}
      {...provided.droppableProps}
      className="scrollable-column-container"
    >
      {/* 此处渲染Draggable卡片列表 */}
      {provided.placeholder}
    </div>
  )}
</Droppable>

• 排查样式干扰：检查Draggable绑定了provided.draggableProps的元素及其父级，是否存在额外的transform属性、偏移类定位样式，这类样式会干扰库的坐标计算，非必要不要添加。
• 依赖替换方案：由于原react-beautiful-dnd包已经停止维护，大量滚动场景下的偏移bug没有官方修复，可以替换为社区持续维护的fork版本@hello-pangea/dnd，API完全兼容，无需改动现有业务代码即可修复绝大多数滚动偏移问题。

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