Rx draggable example

index.html

<div id="draggable-block" style="border: 2px solid black; padding: 20px; display:inline-block">Drag me</div>

script.js

let draggableBlock = document.getElementById('draggable-block');
let mouseDowns = Rx.Observable.fromEvent(draggableBlock, 'mousedown');

mouseDowns
	.flatMap(e => {
		const diffX = e.pageX - parseInt(e.target.style.left || 0);
		const diffY = e.pageY - parseInt(e.target.style.top || 0);
		
		return Rx.Observable.fromEvent(document, 'mousemove')
			.map(e => ({
				x: e.pageX - diffX,
				y: e.pageY - diffY
			}))
			.takeUntil(Rx.Observable.fromEvent(document, 'mouseup'))
	})
  	.subscribe(e => {
  		draggableBlock.style.left = e.x + 'px';
		draggableBlock.style.top = e.y + 'px';
  	});

style.css

#draggable-block {
	position: absolute;
	text-transform: uppercase;
	top: 0;
	left: 0;
	-webkit-user-select: none;
	cursor: default;
}