JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.1/Rx.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

let el = document.getElementById('drag')
let body = document.body
const mouseDown = Rx.Observable.fromEvent(el, 'mousedown')
const mouseUp = Rx.Observable.fromEvent(body, 'mouseup')
const mouseMove = Rx.Observable.fromEvent(body, 'mousemove')
mouseDown
	.map(event => mouseMove.takeUntil(mouseUp))
  .concatAll()
  .map(m => ({ x: m.clientX, y: m.clientY }))
  .subscribe(pos => {
    el.style.left = pos.x + 'px'
    el.style.top = pos.y + 'px'
  })