JSFiddle - React, Tailwind, and code Playground

HTML

<script src='https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.2/rxjs.umd.js'></script>
<h1>Title</h1>

CSS

h1 {
  background-color:yellow;
}

JavaScript

let observable = new rxjs.Observable(subscriber => {
    let ele = document.getElementsByTagName('h1')[0],
        startX,
        startY,
        translateX = 0,
        translateY = 0,
        moving = false;

    ele.style.display = 'inline-block';

    rxjs.fromEvent(ele, 'mousedown').subscribe(evt=>{
        evt.preventDefault();
        moving = true;
        startX = evt.pageX - translateX;
        startY = evt.pageY - translateY;
        subscriber.next({
            translateX,
            translateY
        })
    });

    rxjs.fromEvent(window, 'mousemove').subscribe(evt=>{
        if (moving){
            translateX = evt.pageX - startX;
            translateY = evt.pageY - startY;
            if (translateX + ele.offsetLeft < 0){
                translateX = -ele.offsetLeft;
            } else if (translateX > window.innerWidth - ele.offsetWidth - ele.offsetLeft){
                translateX = window.innerWidth - ele.offsetWidth - ele.offsetLeft;
            }

            if (translateY + ele.offsetTop < 0){
                translateY = -ele.offsetTop;
            } else if (translateY > window.innerHeight - ele.offsetHeight - ele.offsetTop){
                translateY = window.innerHeight - ele.offsetHeight - ele.offsetTop;
            }
            ele.style.transform = `translateX(${translateX}px) translateY(${translateY}px)`;
        }
    });

    rxjs.fromEvent(window, 'mouseup').subscribe(evt=>{
        if (evt.target === ele){
            evt.preventDefault();
            moving = false;
            subscriber.next({
                translateX,
                translateY
            })
        }
    });
});

observable.subscribe(v=>{
    console.log(v);
});