Javascript-форум - Неадекватный drag and drop

Decode,
корректировка ещё добавлена влево и вверх небольшая
и -18 это размер курсора чтобы точно курсор на место клика попадал.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
        html, body { margin: 0; padding: 0; }
        body{
          position: relative;
        }

        #field {
            background: url(https://js.cx/drag-heroes/field.png);
            width: 800px;
            height: 600px;
            float: left;
        }

        .hero {
           border: #FF0000 1px solid;
            background: url(https://js.cx/drag-heroes/heroes.png);
            width: 130px;
            height: 128px;
            float: left;
        }

        #hero1 { background-position: 0 0; }
        #hero2 { background-position: 0 -128px; }
        #hero3 { background-position: -120px 0; }
        #hero4 { background-position: -125px -128px; }
        #hero5 { background-position: -248px -128px; }
        #hero6 { background-position: -244px 0; }

        .draggable { cursor:  crosshair; }
    </style>
</head>
<body>
    <h2>Расставьте супергероев по полю.</h2>

    <p>Супергерои и мяч -- это элементы с классом "draggable". Сделайте так, чтобы их можно было переносить.</p>
    <p>Важно: если супергероя подносят к низу или верху страницы, она должна автоматически прокручиваться. Если страница помещается на вашем экране целиком и не имеет вертикальной прокрутки -- сделайте окно браузера меньше, чтобы протестировать эту возможность.</p>
    <p>Да, и ещё: супергерои ни при каких условиях не должны попасть за край экрана.</p>

    <div id="field"></div>

    <div class="hero draggable" id="hero1"></div>
    <div class="hero draggable" id="hero2"></div>
    <div class="hero draggable" id="hero3"></div>
    <div class="hero draggable" id="hero4"></div>
    <div class="hero draggable" id="hero5"></div>
    <div class="hero draggable" id="hero6"></div>

    <img src="https://js.cx/drag-heroes/ball.png" class="draggable" />

    <div style="clear:both"></div>

    <script>
        var shiftX, shiftY;

        document.onmousedown = function(event) {
            var target = event.target;
            if( !target.classList.contains('draggable') ) return;
            var mousePos = getMousePos(target, event);
            shiftX = mousePos.x ;
            shiftY = mousePos.y;
            target.style.cssFloat = 'none';
            target.style.position = 'absolute';
            moveAt(target, event)
            document.body.appendChild(target);



            document.onmousemove = function(event) {
                moveAt(target, event);
            };

            target.onmouseup = function() {
                document.onmousemove = this.onmouseup = null;
            };

            return false;

        };

        function moveAt(elem, event) {
            var left = event.pageX - shiftX;
            left <  0 && (left = 0);
            elem.style.left = left + 'px';
            var top = event.pageY - shiftY;
            top <  -18 && (top = -18);
            elem.style.top =  top + 'px';
        }

        function getMousePos(elem , event) {
        var rect = elem.getBoundingClientRect();
        return {
          x: event.clientX - rect.left,
          y: event.clientY - rect.top + 18
        };
      }
    </script>
</body>
</html>