bug: Dragged item should keep elevated `z-index` while animating back to it's placeholder location

[Achilles1515]

This may not necessarily be a bug, but it seems odd to me.

While a grid item is being dragged, it's z-index value is set to a high value (1000) to visually layer it on top of the other grid items. Immediately upon releasing the drag, the z-index value is restored to it's default value, and the grid items layer according to natural DOM order.

This places the dragged item animating back to it's placeholder location behind other items that came after it.

In my opinion, the dragged item animating back to it's placeholder location is still "more important" than the other grid items until it's drag [visually] fully completes and should therefore keep it's high z-index value until the animation/transition ends. Like this:

This keeps the visual behavior consistent for any dragged item --> a user not aware of DOM order layering may very well question why the animating dragged item sometimes is over top of items and sometimes not.

This issue about adding a CSS class for the animating to placeholder state could easily help solve this.

[llorenspujol]

Thanks for the nice report!

Yes, it is a visual bug, dragged item should be on top until animations ends.

I see you posted a feature that could resolve this: https://github.com/katoid/angular-grid-layout/issues/5 I agree with that feature & the proposed code from Angular Material. The way they solve it is totally fine, an I am sure it is bullet prof.

Do you want to do a MR with the solution @Achilles1515 ? The name of the class could be ktd-grid-item-animating or ktd-grid-item-dragend.