How to lock items in a sortable list?

[IPJT]

Hi,
I'm using the SortableContext-component and the useSortable-hook to build a vertically sortable list.

I'm able to disable an individual SortableItem by setting disabled: true when calling the useSortable-hook for that specific item implying the item will no longer be draggable. Great!

However, what I would also like to do is to be able to "lock" an item to its index. Example items-list:

[
{
title: 1,
isLocked: false
},
{
title: 2,
isLocked: true
},
{
title: 3,
isLocked: false
}
]

When the 3rd item is dragged on top of 2 it wouldn't push the 2nd item down as it's locked. If the 3rd item is dragged on top of 1, item 3 and 1 would swap position. I hope that makes sense.

• So my question is basically how I achieve the above?
• Is there a build in way to do it such as the disabled-argument?

I guess what I could do is the following:

• Modify the onDragEnd-callback such that the "final" sorting takes the locked item mechanism into account
• Build my own SortingStrategy to make sure the css-transform applied to the different items reflect where they'll end up

The issue I have with the above approach is how to access isLocked in my custom SortingStrategy.

Thanks a lot in advance!

[aryan-mehrabi]

@IPJT Did you manage to achieve this?

[hsavit1]

@IPJT any luck?

[hsavit1]

@IPJT try this hack #855 (reply in thread)

[IPJT]

@aryan-mehrabi, @hsavit1

Sorry for the late reply and thanks for recommending #855!

I ended up solving this by:

• Modifying the onDragEnd-callback such that the "final" sorting takes the locked item mechanism into account
• Building my own SortingStrategy to make sure the css-transform applied to the different items reflect where they'll end up

Seems like the hack in #855 is indeed the path of least resistance :P