Multiple rectangle collision

I have one draggable rectangle and multiple static rectangle. I know how to detect if two rectangles collide and once I detect the collision between two rectangles I replace the draggable rectangle to the nearest non-colliding position. But the problem is that I cannot figure out any good algorithm to replace it to "another" nearest position if the actual nearest position is occupied by some other stat开发者_开发问答ic rectangle. All is seen clearly in this picture: http://i.stack.imgur.com/hocZR.png

Could you please suggest a solution to the problem or point me to resources that can help me find it myself?

Here's how I detect collision between two rectangles:

function detectCollision(r1, r2) {
  return !(r2.left > r1.right || 
           r2.right < r1.left || 
           r2.top > r1.bottom ||
           r2.bottom < r1.top);
}

Maybe just make it not allow you to place the rectangle until it is in a place not occupied by any other rectangles

Maybe you can make the draggable rectangle static like the others so you won't face the problem you are trying to solve now.

This may not work all the time, but instead of:

if(rect = findcollision())
    move_out_of_the_way(rect);

Do:

while(rect = findcollision()){
    move_out_of_the_way(rect);
}

And if the loop has run for more than 10 times you give up or something.