physics - How can I implement rectangle collision response?

I am working on a game in JavaScript and my current implementation of collision uses the shortest distance to push the intersecting object away, which isn't always correct. I've made this diagram of the ideal collision. The red box represents the starting position, the green box represents the proper position and the black box represents the static object it is colliding against. The blue arrow is the velocity vector. With my current implementation, the object would be placed in its final position and pushed out (and in this case it would be pushed left)

How can I fix this?

Answer

You can procedurally find out how to do a moving AABB/AABB trace with the formulas on this page.

http://www.realtimerendering.com/intersections.html

Basically those equations will tell you what percentage of your move you should do that frame, which will allow you to place your square at the correct location.