Geek asks and answers

How to make a div or object gradually move to the mouseclick point using javascript?

So, I have an object or div that is a square size of 10x10 pixels. I want to be able to click somewhere in the browser window, which causes the div to gradually move to the point I clicked on.

+2
source share
3 answers
$(document).click(function(event) {
    $('#divID').css({
       'position': 'absolute', 
       'left': event.clientX + document.body.scrollLeft, 
       'top': event.clientY + document.body.scrollTop });
});

Demo

0
source

JQuery

$(document).click(function(event) {
    var x = event.pageX,
        y = event.pageY;

    $('div').animate({
        top: y,
        left: x
    }, 1000);
});

CSS

div {
    background: red;
    padding: 5px;
    position: absolute; 
}

HTML

<div>hello</div>

jsFiddle .

+4
source

JQuery code

$("body").bind("click", function(e){
  var str = "( " + e.pageX + ", " + e.pageY + " )";
  $("span").text("Clicked  at " + str);
});

after receiving this you need to update div.style.left and div.style.top!

0
source

More articles:


All Articles