Variable sized sortables stretched when dragged

[sampl]

Hi @clauderic, sorry for the onslaught of issues this week :)

I have sortables with various heights getting stretched during drag. It looks like the size is being based on the size of the previous item in that position or something else, rather than the item's size?

https://www.loom.com/share/6013cf18e6b44fa2ad3e60826d57f814

Unlike the rectSortingStrategy various sizes demo, I'm not setting the size of my items using CSS grid. The size is determined by the content of each item.

Code Sandbox: https://codesandbox.io/s/dnd-kit-various-sizes-wo-grid-wnxzo

Apologies if this is my mistake or a documented known limit (I looked but didn't see anything).

[clauderic]

The items are stretched because you're using CSS.Transform.toString(), use CSS.Translate.toString() if you don't want to have the scale transformation applied.

In the example you've provided, the layout of your items is not predictable, therefore you won't be able to use any of the built-in sorting strategies, you'd need to build one yourself for that use-case (refer to #44 (comment)).

You can however try to re-order the items onDragOver instead of onDragEnd as in this example, but it's not perfect as it is stretching the library beyond the use cases it is optimized for https://codesandbox.io/s/dnd-kit-various-sizes-wo-grid-forked-flxee?file=/src/App.jsx

[sampl]

the layout of your items is not predictable, therefore you won't be able to use any of the built-in sorting strategies

Good to know, thanks for the clarification @clauderic

Based on this comment it sounds like you already plan to update the docs--I think that definitely would have helped set me straight.

You can however try to re-order the items onDragOver instead of onDragEnd as in this example

Thank you! Looks good to me, I'll try this and see how it goes.

[eliot-loxo]

+1 to a doc update -- this GitHub issue saved me.

[ticmaisdev]

this is not working for me:

use CSS.Translate.toString()

---

solution

I just realized I had this prop enabled, which disabling actually solved my issue:

<DragOverlay adjustScale>

[YakuBrangJa]

I used verticalListSortingStrategy in <SortableContext /> and it solved it.

import {SortableContext, verticalListSortingStrategy} from '@dnd-kit/sortable'

      <SortableContext
        items={formData.map(field => field.id)}
        strategy={verticalListSortingStrategy}
      >
      // Your sortable items
     </ SortableContext>

[chrisstayte]

This all did not work for me. I had a list of different size items.

Attached is an example.

Here is a code example of my solution to fix this.

import { useDraggable } from '@dnd-kit/core';
import { CSS } from '@dnd-kit/utilities';

function DraggableItem() {
  const { attributes, listeners, setNodeRef, transform } = useDraggable({
    id: 'your-item-id',
  });

  const style = {
    transform: transform ? CSS.Translate.toString(transform) : undefined,
  };

  return (
    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
      {/* Your item content */}
    </div>
  );
}