How to implement variable width horizontal sorting list properly?

[samesfahani-tuplehealth]

Screen.Recording.2022-04-25.at.4.35.46.PM.mov

Apologies if this is a very basic ask, but I am at a loss as to what's wrong here. As you can see, the widths are not being calculated properly and the transforms are all off. I am really trying to replicate the Sortable Horizontal Variable Widths story a la https://5fc05e08a4a65d0021ae0bf2-ipdskkittb.chromatic.com/?path=/story/presets-sortable-horizontal--variable-widths&globals=backgrounds.grid:false

Here is my repro:
https://codesandbox.io/s/vigorous-brown-k63m6x?file=/src/DraggableHeader.tsx

[samesfahani-tuplehealth]

I can see that I was incorrectly using the index as the id. Just logical errors in the onDragStart/End handlers, in case that helps anyone.

[remitoffoli]

Hi @samesfahani-tuplehealth, thank you for sharing your Typescript code! 🙂

I've been struggling for 3 hours trying to get a simple vertical sortable component. Yours was the first example I saw using objects, not strings, as items. 🙌 And now I understand we MUST use an "id" property as item identifier. 🤦‍♂️ I now have to find a way to convert my data's "uids". 🤷‍♂️