How to keep a specific item of a grid frozen in the same position while the grid is being sorted from a dragSort? about muuri HOT 2 CLOSED

It doesn't seem like there is a way to accomplish the frozen functionality with the native API.

However, changing grid._items when a layoutStart event is emitted from the grid changes the resultant layout. For example, this swaps the first two items of the grid whenever an item is dragged and a sort should occur:

grid.on('layoutStart', function(items, isInstant) {
    [grid._items[0], grid._items[1]] = [grid._items[1], grid._items[0]]
});

My idea now is to keep track of grid._items before and after every layoutStart event, take a diff, then determine whether the items that have been moved to a different index of grid._items should be put back where they belong before the sort animation occurs, based on if they are frozen.

Is there a better way to do this? I have also considered changing the source code to make it better suited for freezing items.

from muuri.

Muuri is very well architected, and written. Reading the source was the most pleasurable experience I have ever had with vanilla js.

I ended up changing some of the source code, specifically the grid.move and grid.swap functions, along with a public prototype method to set the frozenIndexes safely. The changes are on this fork of muuri.

Note that this is not the most performant or ergonomic way to accomplish this. For my usecase, each grid has at max 8 items, so performance doesn't really matter.

Also, it has not been tested on 2D grids.

from muuri.