JSFiddle - React, Tailwind, and code Playground

by Yunus Gaziev

HTML

<div id="square"></div>

CSS

#square {
    position   : absolute;
    
    top        : 0;
    left       : 0;
    
    width      : 50px;
    height     : 50px;
    background : green;
}

JavaScript

// переменные для храния координат клика по квадрату
// для нормализации перемещения при клике на квадрат
var squareOffsetX; // x клика на квадрате
var squareOffsetY; // y клика на квадрате

// выбераем элемент и привязываем событие шажатия мыши на нем
document.getElementById('square').onmousedown = function(event) {
    
    // запоминаем координаты клика в пределах квадрата
    suareOffsetX = event.offsetX;
    suareOffsetY = event.offsetY;
    
    // присваеваем self объект квадрата
    // иначе, при onmousemove в this будет лежать document
    var self = this;
    
    document.onmousemove = function(event) {
        self.style.left = event.pageX - suareOffsetX + 'px';
        self.style.top = event.pageY - suareOffsetY + 'px';
    }
    
    this.onmouseup = function() {
        document.onmousemove = null;
    }
}

//document.getElementById('ball').ondragstart = function() { return false }