@dnd kit list sorting not working properly when parent div has transform:scale() css

Question

@dnd-kit list sorting not working properly when parent div has transform:scale() css.

In one of my project there is one feature for zoom In/Out. And That I am managing with transform:scale(). But now in the child component I am using @dnd-kit sortable library to sort my blocks. but because of that transform:scale() css sorting is not working properly like cursor and block are not moving aligned.

here is my demo link: https://codesandbox.io/p/sandbox/dndkit-sorting-4gxnz7.

Answer 1

The doc method didn't work for me.

The only way I found was this:

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

Answer 2

you should recalculate your sortable item x, y transform values with parents scale value.

kinda like this,

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

Sortable Item like,

 <div ref={setNodeRef} style={style}>
     {children}
 </div>