title: Why the dragged element is shifted a few pixels after drop event?
body: <p>I have a drag-and-drop demo, tested in google chrome: <a href="https://jsfiddle.net/eenrcu0c/9/" rel="nofollow">https://jsfiddle.net/eenrcu0c/9/</a></p>
  
  <pre><code>  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);
  </code></pre>
  
  <p>When I make "mouse up" (drop, dragend events) the draggable element moves. But it moves on some pixels to the right and lower than it should, not where cursor stopped. How should I make it move right to the place where it was dragged? I can deduct some pixels from x and y, but why does it happen? Does the problem lie in the different types of cursor (default and pointer)?</p>