Question

I’m trying to make an object to move in an area when clicking the area with the left pointer.

• Is this possible in javascript/jquery?
• Can you please give me some examples if possible?
• I’m aiming to do this in javascript/html/css

Here’s an example of an object following the mouse click

Answer 1

You can do it like this (Working Demo in jsFiddle):

$(document).ready(function(){
    $('#canvas').click(function(e){
        var offset = $(this).offset();
        $('#object').css({
            'top': e.pageY-offset.top,
            'left': e.pageX-offset.left
        })
    })
})

Whenever the click event happens, it’s pageX and pageY values are taken using which the exact location of the click in the canvas object is found. This coords are then used in jQuery animate function to change the location of the object div in it.