Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <img src="https://js.cx/clipart/ball.svg"
         style="cursor: pointer; position: absolute; left: 279px; top: 100px; z-index: 1000;" width="40" height="40"
         id="ball">
</head>
<body>
<script>
    var ball = document.getElementById('ball');

    ball.onmousedown = function (e) {

        var coords = getCoords(ball);
        var shiftX = e.pageX - coords.left;


        ball.style.position = 'absolute';
        document.body.appendChild(ball);
        moveAt(e);

        ball.style.zIndex = 1000; // над другими элементами

        function moveAt(e) {
            ball.style.left = e.pageX - shiftX + 'px';
        }

        document.onmousemove = function (e) {
            moveAt(e);
        };

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

    }

    ball.ondragstart = function () {
        return false;
    };

    function getCoords(elem) {
        var box = elem.getBoundingClientRect();
        return {
            left: box.left + pageXOffset
        };
    }
</script>
</body>
</html>