RxJs Drag

Demonstration Part I

by reesewill

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.1.0/rxjs.umd.min.js"></script>
<div class="container">
  <div class="block">
  
  </div>
</div>

<script src="https://npmcdn.com/@reactivex/[email protected]/dist/global/Rx.umd.js"></script>

SCSS

.block {
  height: 20px;
  width: 40px;
  position: absolute;
  background-color: red;
}
.container {
  border: 2px solid black;
  height: 200px;
  width: 200px;
  background-color: #ddd;
}

JavaScript

var block = document.querySelector('.block');
var container = document.querySelector('.container');

var mouseDowns = Rx.Observable.fromEvent(block, 'mousedown');
var mouseMoves = Rx.Observable.fromEvent(container, 'mousemove');
var mouseUps = Rx.Observable.fromEvent(document, 'mouseup');

mouseDowns.concatMap(() => {
	return mouseMoves.takeUntil(mouseUps);
}).subscribe((e) => {
	block.style.left = e.pageX + 'px';
  block.style.top = e.pageY + 'px';
});