Issue with using mousemove

[Shadowing]

Hey guys I've been working on this all day and I can't figure out why I'm having this issue. If I had any hair id be tearing it out

 

Here is my jsfiddle example

 

 

When you hit start and then hover your mouse over the black square an image will be placed next to the cursor

as I slowly move the mouse towards the edge of the top,right or bottom of the map it will stop the building from going off the edge but if you move it little harder past the edge it glitches past it. If you move the cursor to the left it will stop correctly.

 

I'm thinking how im trying to do this is just way wrong. Right now if its to far one direction it pushes it back. That seems kind of bad route to take in general.

 

http://jsfiddle.net/hgXVq/70/

 

 

so idk at a huge wall atm hopefully someone has some suggestions.

It seems I have to offset the picture little away from the cursor other wise the picture messes up with moving with the cursor

Edited October 1, 2013 by Shadowing