rxjs学习笔记: 拖拽 drag and drop

利用 rxjs 实现一个简单的 drag/drop 实例

HTML部分：

<style>
  #drag {
    width: 100px;
    height: 100px;
    background: #060;
    position: absolute;
  }
</style>

<div id="drag"></div>

Javascript部分：

这里有部分代码可以简化

// 原始代码
.pipe(
  map(() => mousemove$.pipe(takeUntil(mouseup$))),
  mergeAll(),
)

// 简化为
.pipe(
  mergeMap(() => mousemove$.pipe(takeUntil(mouseup$))),
)

import { fromEvent } from 'rxjs';
import { map, mergeAll, takeUntil, withLatestFrom } from 'rxjs/operators';

const el = document.getElementById('drag');
const mousedown$ = fromEvent(el, 'mousedown');
const mousemove$ = fromEvent(document, 'mousemove');
const mouseup$ = fromEvent(document, 'mouseup');
const getOffset = (move: MouseEvent, down: any) => {
  return {
    x: move.clientX - down.offsetX,
    y: move.clientY - down.offsetY,
  };
};

mousedown$
  .pipe(
    map(() => mousemove$.pipe(takeUntil(mouseup$))),
    mergeAll(),
    withLatestFrom(mousedown$, getOffset)
  )
  .subscribe((e) => {
    el.style.cssText = `left: ${e.x}px; top: ${e.y}px;`;
  });

在线Demo：