When dragging multiple files in Google Drive, it does the slick animation where it compresses the files into a stack and displays a counter for the files in the top right corner. The answer I am looking for isn't about the exact CSS required for the animation, but I am looking for an answer that can describe the overall process of how this is done, beginning with the dragstart DOM event. From what I know, when an element starts to get dragged, the browser takes a bitmap screenshot of the element and uses that as the drag cursor image. I also know that you can set the drag image on the dragstart event, however, how are they dynamically generating and setting the drag image with the file name in it?
It's not a drag image because if you move you cursor fast enough, you'd see that its speed is trying to catch up to you: it's position: fixed
elements with the top:
and left:
(or translate
or any number of methods) being from its initial coordinates to your mouse coordinates (mousemove
event), and speed being transition: top 0.2, left 0.2
.