JSFiddle - React, Tailwind, and code Playground

by Nickolay Ilchenko

HTML

<img id="ball" src="http://learn.javascript.ru/files/tutorial/browser/events/ball.gif" />

JavaScript

// ===== Функция для перестаскивания мяча по экрану ======
function dragAndDropBall(elemId) {
    var ball = document.getElementById(elemId);

    ball.onmousedown = function (event) {
        var self = this;
        prepare();
        moveAt(event);

        document.onmousemove = function(event) {
            moveAt(event);
        }
        
        this.onmouseup = function(event) {
            self.onmouseup = document.onmousemove = null;
        }

        // ===== Перемещение мяча относительно документа =====
        function moveAt(event) {
            ball.style.top = event.pageY + 'px' ;
            ball.style.left = event.pageX + 'px';
        }

        // ===== Стартовая подготовка для мяча =====
        function prepare() {
            ball.style.position = 'absolute';
            ball.style.zIndex = '1000';
            document.body.appendChild(ball);
        }
    }

    // ===== Отменяем встроенный html5 druganddrop =====
    ball.ondragstart = function () {
        return false;
    }
}

// ===== Инициализация =====
dragAndDropBall('ball');