Bug when dragging overlapping sprites

https://scratch.mit.edu/discuss/topic/847056/

Expected Behavior

The topmost sprite is picked up

Actual Behavior

Depending on the dragging speed, different things can happen:

• the wrong sprite is picked up
• the right sprite is picked up, but the other sprite is hidden and it's motion blocks are disabled

Steps to Reproduce

Place two sprites such that they are overlapping and the first sprite from the sprite list is on top of the second sprite. Try dragging the first sprite where it covers the second sprite.

If you click and wait until the sprite is automatically picked up, then it usually picks up the second sprite.
If you press the mouse button while the mouse is already moving then it usually hides the second sprite and picks up the first one

Steps to reproduce the behavior:

1. Go to 'https://scratch.mit.edu/projects/editor/'
2. Add a sprite (eg. 'Bear')
3. Drag and drop the Scratch Cat on the Bear
4. Try dragging the Scratch Cat where it covers the Bear

System Details

Windows 10, Chrome 132

Screenshots

https://github.com/user-attachments/assets/3ce44dfc-570b-44f4-ba30-d1f943f552a6

I've looked into the code and in stage.jsx#L345-L364 the draggable targets are tested in the order they appear in vm.runtime.targets, which is not the layer order

Reproduce the overlap-dragging case in the Scratch editor, then read packages/scratch-gui/src/containers/stage.jsx around lines 345-364 and inspect how vm.runtime.targets are checked. Done means dragging the topmost overlapping sprite consistently selects it without hiding the other sprite or disabling its motion blocks.