Is it possible to have different layout only during dragging?

[jiniC]

Hello, I posted another question right below. murri seems like a very nice library, so I'm constantly testing the various specs. Then again, there is a blockage, so I inquire.

When I drag an item, I want to expose it by narrowing the height of all the items, and then return it to its original state when the dragging is finished. (like google cloud platform dashboard : https://console.cloud.google.com/home/dashboard) As in the example of Google Cloud Platform, I am also trying to place items with different height values. I'm testing using the supported events, But it wasn't easy...

In particular, I'm having a hard time finding an easy way to do the following.

• How to find out which item is located at the top of a column : I added col value as an attribute by calculating based on the layout drawn when the layoutEnd event is called.
• How to operate with the layout rule set during dragInit during dragging : I have no ideas. 😥

So I leave a question. Any good ideas for implementing this using murri ?

I also attach an example gif file of the function I want to implement using murri 🥺

[niklasramo]

@jiniC This is an interesting question! And a good use case, which should definitely be supported by Muuri, so let's dig in and see if it's possible :)

My first question is that are the columns separate Muuri containers (3 Muuri instances) or is there just one big grid (1 Muuri instance)? If this is a kanban-like setup you should be able to build the GCP Dashboard example with Muuri pretty easily. However, if it's just one big grid then things get more messy (but should still be doable in theory, there are just some big UI issues not related to Muuri specifically).

To make the kanban-like version work you really don't need to do anything special other than setting the muuri item height to match the height of the item header for all items you want to minimize during drag. Then just call grid.refreshItems().layout() for all the respective grids. You'd want to do this on dragInit event. And then on dragReleaseEnd you'd want to unset the forced height of the items and again call grid.refreshItems().layout(). The only real problem is making the item minimize animation behave nicely and in sync with Muuri, but there are plenty of ways to do that. Here's quick example on an example implementation: https://codepen.io/niklasramo/pen/JjOjxay

I hope this helps :)