RxJs Drag (Fixed)

Demonstration Part II

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');
var mouseStartX, mouseStartY;

mouseDowns.concatMap((mouseStart) => {
	return mouseMoves.takeUntil(mouseUps).map((e) => {
  	return {
    	x: e.pageX - mouseStart.layerX,
      y: e.pageY - mouseStart.layerY,
    }
  });
}).subscribe((e) => {
	block.style.left = e.x + 'px';
  block.style.top = e.y + 'px';
});