Dnd-kit：如何为可交换网格的碰撞检测添加延迟

针对你拖动单元格7时出现的频繁不必要交换问题，给你几个实用的解决思路，都是基于dnd-kit的自定义配置来实现：

1. 给碰撞检测加延迟判断 #

默认的closestCenter碰撞检测太灵敏，稍微碰到就触发交换，我们可以给它加个延迟，只有碰撞状态持续一段时间才确认交换：

先引入依赖：

import { closestCenter, CollisionDetection } from '@dnd-kit/core';

然后实现带延迟的自定义碰撞检测函数：

const delayedCollision = (delay = 200): CollisionDetection => {
  let timer: NodeJS.Timeout | null = null;
  let lastHitId: string | null = null;

  return (args) => {
    const hits = closestCenter(args);
    
    // 没碰撞就清空定时器
    if (hits.length === 0) {
      timer && clearTimeout(timer);
      timer = null;
      lastHitId = null;
      return hits;
    }

    const currentHitId = hits[0].id;
    // 碰撞同一个元素，还没触发定时器就设置延迟
    if (currentHitId === lastHitId) {
      if (!timer) {
        timer = setTimeout(() => {
          timer = null;
        }, delay);
      }
      // 延迟期间返回空数组，不触发交换
      return [];
    }

    // 换了碰撞目标，重置状态
    timer && clearTimeout(timer);
    timer = null;
    lastHitId = currentHitId;
    return [];
  };
};

最后在DndContext里替换默认的碰撞检测：

<DndContext collisionDetection={delayedCollision(200)}>
  {/* 你的网格组件 */}
</DndContext>

2. 提高碰撞触发的重叠阈值 #

要求拖动元素和目标单元格重叠到一定比例才触发交换，比如超过50%：

const thresholdCollision: CollisionDetection = (args) => {
  const { collisionRect, droppableRects } = args;
  
  return Array.from(droppableRects.entries())
    .map(([id, rect]) => {
      // 计算重叠面积占拖动元素的比例
      const overlapX = Math.max(0, Math.min(collisionRect.right, rect.right) - Math.max(collisionRect.left, rect.left));
      const overlapY = Math.max(0, Math.min(collisionRect.bottom, rect.bottom) - Math.max(collisionRect.top, rect.top));
      const overlapArea = overlapX * overlapY;
      const dragArea = collisionRect.width * collisionRect.height;
      const ratio = overlapArea / dragArea;

      return { id, data: { ratio } };
    })
    .filter(item => item.data.ratio > 0.5)
    .sort((a, b) => b.data.ratio - a.data.ratio);
};

把这个函数传给DndContext的collisionDetection即可，这样就能大幅减少误触发。

3. 调整拖动激活的距离阈值 #

让鼠标拖动超过一定距离才激活检测，避免轻微抖动就触发交换：

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

const sensors = useSensors(
  useSensor(PointerSensor, {
    activationConstraint: {
      distance: 10, // 拖动10px以上才激活
    },
  })
);

// 传入DndContext
<DndContext sensors={sensors} collisionDetection={...}>
  {/* ... */}
</DndContext>

可以根据自己的需求调整这个距离值，平衡灵敏度和误触发问题。

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