how to implement fix/disabled item with Sortable

[TianboZ]

ask-dnd-kit.mp4

when i drag over item 2 and move it up, it squeezes item 1 to the position of item 2. How can I get a fixed item that its position can't be squeezed away when dragging the item over it? i tried to set disabled with useSortable, but it does not help. I found a trick to do this, see below image, but not sure if there is better way.

[aryan-mehrabi]

@TianboZ Did you ever manage to achieve this?

[aryan-mehrabi]

@robahtou I don't know if this suits your case but you can pass setNodeRef conditionally like this:

<div
  {...attributes}
  ref={isDisabled ? undefined : setNodeRef}
>
...
</div>

or if you're using setDroppableNodeRef:

<div
  {...attributes}
  ref={isDisabled ? undefined : setDroppableNodeRef}
>
...
</div>

[hsavit1]

@aryan-mehrabi this is a great hack, thanks for sharing!

[btrianurdin]

thank you man! it's work...

[pranavdhamanage-work]

Did anyone find a proper way to fix it? From what I have understood this needs to accomplished by updating vertical list sorting strategy, handling reordering of items in the onDragEnd handler and maybe the updation of collision strategy as well

[pranavdhamanage-work]

@clauderic do you have insights on this? How can this be achieved properly because this seems to be a common use case.