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?

[robahtou]

ran into the same issue. disabled: true is not working for a particular id

[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!