为什么拖放元素在放置事件后移动几个像素？

Question

我有一个拖放式演示，在google chrome中测试过：https://jsfiddle.net/eenrcu0c/9/

  var dragged, x, y;

  document.addEventListener("dragstart", function( event ) {
      dragged = event.target;
  }, false);

  document.addEventListener("dragover", function( event ) {
      event.preventDefault();
  }, false);

  document.addEventListener("drop", function( event ) {
      event.preventDefault();
      if ( event.target.className == "dropzone" ) {
          dragged.parentNode.removeChild( dragged );
          event.target.appendChild( dragged );
          x = event.clientX;
          y = event.clientY;
          dragged.style.left = x + "px";
          dragged.style.top = y + "px";
      }

  }, false);

当我进行“鼠标向上”（drop，dragend events）时，可拖动元素会移动。但是它会向右移动一些像素，而不是它应该移动，而不是光标停止的位置。我应该如何让它直接移动到被拖动的地方？我可以从x和y中扣除一些像素，但为什么会这样呢？问题出在不同类型的游标（默认和指针）上吗？