jQuery positioning and appending a div on mouse move

Question

Well i tried to do something like this :

var oldX=0,oldY=0;
$('body').mousemove(function(e){
     $('.movestatus').text('mouse moved');
     var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
     $(".chords").text(clientCoords);
     var ap = $("<div class='k'></div>");
     ap.offset({ top: e.clientX, left: e.clientY });
         $("body").append(ap);
     oldX = e.clientX;
     oldY = e.clientY;
 });

Demo

Well this works BUT the added div are added a lot below where the mouse actually is and also not added always.

How can i fix this ?

Answer 1

One little thing you forgot:

.k {
    height:10px;
    width:10px;
    background:red;
    position:absolute; <-------
}

Answer 2

add position: absolute; to you class k

AND

ap.offset({ top: e.clientX, left: e.clientY });

should be:

ap.offset({ top: e.clientY, left: e.clientX });

example