Auto align while overlapping

what would be the best way to make a square that is overlapping another square move to align itself with the square underneath it automatically? - and not instantaneously but by actually moving on both the X and Y axis toward the bottom squares hotspot untill it's properly aligned.

I have a Point and Click Example on my website you can adapt. Instead of clicking and setting a destination you could change it to "Something Happens". Then when it overlaps, set the X,Y to the other square.

Marv