Как заставить div или объект постепенно перемещаться в точку щелчка мышью с помощью JavaScript?

Question

Итак, у меня есть объект или div, квадрат 10х10 пикселей. Я хочу иметь возможность щелкнуть где-нибудь в окне браузера, что приведет к постепенному перемещению div к точке, по которой я нажал.

Answer 1

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 .

Answer 2

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

Демо

Answer 3

jQuery код

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

после получения этого вам нужно обновить ваши div.style.left и div.style.top!