Animate drag and drop using FLIP approach and simplify calculation of all elements

[cibernox]

This PR overhauls how the elements calculate its positions and animate on the screen.

Before this change, elements didn't really change order until the mouse was lifted and the dragged element dropped. Instead, the right transform was applied to all elements as the mouse moved.

However this approach was complicated because it forced us to calculate where the elements would be positioned if the dragged element was to be dropped, which is easy in some cases but super complicated in others (e.g. if the elements are inline-block and they wrap to a second line, our calculations would have to be as complicated as the ones the browser does to know where to put elements).
This was not a sensible approach for the most complex layouts.

After this change, we use the F.L.I.P approach to animations (First, Last, Invert, Play).
That is, we store the elements position before, then elements are reordered for real as the mouse moves, so the browser does the calculation for us and places them on their last position. Then, we applied a transform to make them seem like they are where they were at the beginning and finally we play an animations that returns them to their real and final positions.

This approach is valid for any layout, as it's the browser the one doing the hard math, therefore it will enable X/Y dragging with little effort.

Screen.Recording.2024-09-27.at.18.33.41.mov