JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/rxjs@7.5.4/dist/bundles/rxjs.umd.js"></script>
<div id="drag"></div>

CSS

html, body {
  height: 100%;
  background-color: tomato;
  position: relative;
}

#drag {
  position: absolute;
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #fff;
  cursor: all-scroll;
}

JavaScript

const { fromEvent, map, switchMap, takeUntil } = rxjs;

const mousedown$ = fromEvent(document.getElementById("drag"), "mousedown");
const mousemove$ = fromEvent(document, "mousemove");
const mouseup$ = fromEvent(document, "mouseup");

mousedown$
  .pipe(
    switchMap((downEv) => {
      const startX = downEv.clientX;
      const startY = downEv.clientY;
      const originalLeft = +drag.style.left.replace("px", "");
      const originalTop = +drag.style.top.replace("px", "");
      return mousemove$.pipe(
        map((moveEv) => {
          const moveX = moveEv.clientX;
          const moveY = moveEv.clientY;
          const deltaX = moveX - startX;
          const deltaY = moveY - startY;
          return {
            originalLeft,
            originalTop,
            deltaX,
            deltaY,
          };
        }),
        takeUntil(mouseup$)
      );
    })
  )
  .subscribe(({ originalLeft, originalTop, deltaX, deltaY }) => {
    drag.style.left = originalLeft + deltaX + "px";
    drag.style.top = originalTop + deltaY + "px";
  });