вопрос по onmousemove в javascript

Сделал что бы блок двигался за мышкой, и он двигается но как сделать что бы курсор мышки всегда был в центре блока?
Вот мой код:









Document



html, body{height:100%; margin:0;}

body {

background:url(DSC00124.jpg);

background-size: 100%;

}

h1{margin:0;}

#rect{

width: 250px;

height: 250px;

background: url(pricel.png);

background-size:100%;

position: absolute;

top: 0;

left: 0;

}











var rect = document.getElementById("rect");

var move = false;

var x, y;

rect.onmousemove=function(e){

move = true;

x = e.offsetX || e.layerX;

y = e.offsetY || e.layerY;

}

rect.onmouseup=function(e){move = false;}

document.body.onmousemove=function(e){

e = e || event;

if(move == true){

rect.style.top = (e.clientY - y)+"px";

rect.style.left = (e.clientX - x)+"px";

}

}