Appending at cursor position

Question

I am implementing Drop function,which on drop appends the child at cursor position on the container.But the element is getting appended slightly away from the cursor position.Below is my Drop function:

drop(event) {
     event.preventDefault();
     var data = document.getElementById(event.dataTransfer.getData("Text"));
     event.target.appendChild(data);
     data.style.position="absolute";
     data.style.left = event.pageX - data.clientWidth / 2 + "px";
     data.style.top = event.pageY - data.clientHeight / 2 + "px";    
    }