Click to move a div to the mouse co-ordinates

Question

I have the following code:
http://www.project-vanquish.co.cc/gridtest/drag-grid.html

The plan is to allow the user to control that div (with the smiley face) in 3 ways:

1 - by the Cursor Keys on the keyboard
2 - by dragging the div
3 - by clicking on an area and the div will move to that position

The problem I have is that when I click the page the div seems slightly offset to what it should be :(

Also, the "click to move" method doesn't work at all in IE.

I thought I had cracked this last night, evidently not...

Answer 1

To solve the offset problem in your click method, try adjusting the top and left animation properties to compensate for the inline styling (top:200px; left:120px;) you've applied to the #character div. e.g:

Instead of this:

$('#character').animate({
    top:    mouseY,
    left:   mouseX
})

Try this:

$('#character').animate({
    top:    mouseY - 200,
    left:   mouseX - 120
})

To get it working in IE, try adding a semicolon at the end of the animate method:

$('#character').animate({
    top:    mouseY - 200,
    left:   mouseX - 120
});

(Both solutions untested.)

Answer 2

If there is some offSet, then you should catch it and add it (as Margin). To do that, use firebug and read the DOM (offSetX and offSetY). With jQuery get the according offSet and add it to the Margin (Top or Left).

I was in a similar situation few days ago, let me know if you didn't found out a way out. The solution proposed by NickD would probably solve the issue, but since the offSet can change from browser to other, or while doing improvement to the design, an automatic solution would be worth the effort.

Answer 3

You need to adjust the mouse coordinates because they are absolute (from the event object) but you have work to with relative on the map.

So you need the coordinates of the map and subtract them from the mouse click coordinates every time a click occures.

You also have to normalize the click coordinates to deal with the center of the character (instead of the top left corner). So you need to subtract the half of the character's width and height from the mouse coordinates.

[See it in action]

var mapTop     = $('#map').offset().top;
var mapLeft    = $('#map').offset().left;
var charWidth  = $('#character').outerWidth();
var charHeight = $('#character').outerHeight();

$('#map').click(function (e) {
    var mouseX = e.pageX - mapLeft - (charWidth / 2);  // convert absolute coords
    var mouseY = e.pageY - mapTop  - (charHeight / 2); // into relative ones...
    mouseX = Math.round(mouseX / 40) * 40;
    mouseY = Math.round(mouseY / 40) * 40;
    $('#character').animate({
        top: mouseY,
        left: mouseX
    })
});