@dnd 套件列表排序在父 div 具有 Transform:scale() css 时无法正常工作

Question

@dnd-kit 当父 div 具有 Transform:scale() CSS 时，列表排序无法正常工作。

在我的一个项目中，有一项用于放大/缩小的功能。我正在使用 Transform:scale() 进行管理。但现在在子组件中，我使用 @dnd-kit 可排序库对我的块进行排序。但由于 Transform:scale() CSS 排序无法正常工作，就像光标和块没有移动对齐一样。

这是我的演示链接：https://codesandbox.io/p/sandbox/dndkit-sorting-4gxnz7。

Answer 1

doc方法对我不起作用。

我发现的唯一方法是：

  const style = {
    transform: CSS.Translate.toString({
      x: (transform?.x * 10) / 7,
      y: (transform?.y * 10) / 7,
    }),
    transition,
  };