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

<img src="./samyak/images/0.jpeg" style="cursor: pointer; position: absolute; z-index: 1000; left: 777px; top: 39px; transition: auto 0s ease 0s;" width="40" height="40" id="ball">
<script>
            ball = document.getElementById("ball");
            ball.style.transform="rotate(30deg)"
            ball.ondragstart = function() {
            return false;
            };
            ball.onmousedown = function(event) { // (1) start the process

            // (2) prepare to moving: make absolute and on top by z-index
            ball.style.position = 'absolute';
            ball.style.zIndex = 1000;
            // move it out of any current parents directly into body
            // to make it positioned relative to the body
            document.body.append(ball);
            // ...and put that absolutely positioned ball under the cursor

            moveAt(event.pageX, event.pageY);

            // centers the ball at (pageX, pageY) coordinates
            function moveAt(pageX, pageY) {
            ball.style.left = pageX - ball.offsetWidth / 2 + 'px';
            ball.style.top = pageY - ball.offsetHeight / 2 + 'px';
            }

            function onMouseMove(event) {
            moveAt(event.pageX, event.pageY);
            }

            // (3) move the ball on mousemove
            document.addEventListener('mousemove', onMouseMove);

            // (4) drop the ball, remove unneeded handlers
            ball.onmouseup = function() {
            document.removeEventListener('mousemove', onMouseMove);
            ball.onmouseup = null;
            };

        }
</script>