父div应用transform:scale()时@dnd-kit列表排序功能异常求助

当页面通过transform:scale()做整体缩放时，@dnd-kit的拖动逻辑会因为坐标空间被修改而失效——它默认基于原始未缩放的坐标计算拖动位置，导致视觉上光标和拖动区块对不上。

两种可行的解决办法： #

1. 给dnd-kit的坐标计算加缩放适配

自定义pointerCoordinatesGetter，把光标原始坐标除以缩放比例，让dnd-kit基于缩放后的坐标体系计算位置：

import { DndContext, pointerCoordinatesGetter } from '@dnd-kit/core';

// 这里的scale替换成你实际使用的缩放值，也可以动态从元素style里获取
const scale = 0.8;

const adjustedPointerGetter = (event) => {
  const originalPos = pointerCoordinatesGetter(event);
  return {
    x: originalPos.x / scale,
    y: originalPos.y / scale,
  };
};

// 在DndContext中传入这个自定义方法
<DndContext pointerCoordinatesGetter={adjustedPointerGetter}>
  {/* 你的可排序区块组件 */}
</DndContext>

如果缩放比例是动态调整的，记得实时更新scale值并重新渲染DndContext。

2. 换用不修改坐标空间的缩放方式

放弃transform:scale()，改用zoom属性（Chrome、Edge原生支持，Firefox可以加-moz-transform: scale()+transform-origin: 0 0模拟），或者用根元素font-size配合rem单位实现页面缩放，这样不会干扰dnd-kit的坐标计算：

/* 用zoom替代transform:scale */
.page-container {
  zoom: 0.8;
  /* Firefox兼容写法 */
  -moz-transform: scale(0.8);
  -moz-transform-origin: 0 0;
}

在你的场景里测试这两种方法，都能解决光标和拖动区块错位的问题。

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