列表更新后draggable与DragOverlay间距异常问题求助

问题场景 #

我正在尝试使用dnd-kit实现拖拽功能，列表会在列表项开始拖拽时自动更新：

• 原始列表状态：
  
• 拖拽启动后的列表状态：
  

列表已完成正确更新，但draggable与DragOverlay之间的初始间距未随列表新高度调整，即使拖拽项的光标直接位于列表上方，该间距仍保持不变：

期望效果是draggable项区域尽可能贴近DragOverlay：

问题根源 #

dnd-kit的DragOverlay默认基于拖拽启动瞬间的元素位置计算偏移量，当列表在拖拽启动后高度发生变化时，这个初始偏移没有同步更新，导致DragOverlay和原draggable区域出现固定间距。

解决方案 #

1. 实时监听列表高度，动态调整DragOverlay偏移 #

通过ResizeObserver监听列表容器的尺寸变化，结合拖拽上下文的偏移量，实时修正DragOverlay的位置：

import { useDragContext } from '@dnd-kit/core';
import { useEffect, useRef, useState } from 'react';

const CustomDragOverlay = ({ children, listRef }) => {
  const { active, offset } = useDragContext();
  const [adjustedOffset, setAdjustedOffset] = useState(offset);
  const initialListTopRef = useRef(null);

  useEffect(() => {
    if (!active || !listRef.current) return;

    // 拖拽启动时记录列表初始顶部位置
    if (!initialListTopRef.current) {
      initialListTopRef.current = listRef.current.getBoundingClientRect().top;
    }

    const updateOffset = () => {
      const currentListTop = listRef.current.getBoundingClientRect().top;
      // 计算列表高度变化带来的偏移差值
      const topDiff = initialListTopRef.current - currentListTop;
      // 修正DragOverlay的垂直偏移
      setAdjustedOffset({ ...offset, y: offset.y - topDiff });
    };

    // 监听列表容器尺寸变化
    const observer = new ResizeObserver(updateOffset);
    observer.observe(listRef.current);

    return () => {
      observer.disconnect();
      initialListTopRef.current = null; // 重置初始值
    };
  }, [active, offset, listRef]);

  if (!active) return null;

  return (
    <div
      style={{
        position: 'fixed',
        top: adjustedOffset.y,
        left: adjustedOffset.x,
        pointerEvents: 'none',
        zIndex: 1000,
      }}
    >
      {children}
    </div>
  );
};

// 使用示例
const ListComponent = () => {
  const listRef = useRef(null);
  // ...其他dnd-kit相关逻辑

  return (
    <div ref={listRef} className="list-container">
      {/* 列表项 */}
      <CustomDragOverlay listRef={listRef}>
        {/* 拖拽预览内容 */}
      </CustomDragOverlay>
    </div>
  );
};

2. 确保拖拽项隐藏时保留布局占位 #

列表项被拖拽时，不要用display: none隐藏，而是用visibility: hidden或opacity: 0，保持元素的布局空间，让列表高度变化更自然：

.draggable-item[data-active="true"] {
  visibility: hidden;
}

3. 自定义传感器调整位置计算 #

通过自定义PointerSensor的位置获取逻辑，直接基于列表的当前位置计算拖拽偏移：

import { PointerSensor, useSensor, useSensors } from '@dnd-kit/core';

const sensors = useSensors(
  useSensor(PointerSensor, {
    activationConstraint: { distance: 0 },
    getClientOffset: (event) => {
      const listContainer = document.querySelector('.list-container');
      if (!listContainer) return { x: event.clientX, y: event.clientY };
      const listTop = listContainer.getBoundingClientRect().top;
      // 基于列表顶部计算相对偏移
      return {
        x: event.clientX,
        y: event.clientY - listTop + /* 拖拽项在列表内的初始垂直偏移 */,
      };
    },
  })
);

// 在DndContext中使用自定义传感器
<DndContext sensors={sensors} /* 其他配置 */>
  {/* 内容 */}
</DndContext>

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