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

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
    })
});