rxjs6 拖拽接龙 | 易学教程

效果
参考其他博客, 使用rxjs6实现拖拽接龙
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="./rxjs.umd.js"></script>
  <style>
    .box {
      width: 50px;
      height: 50px;
      background: deepskyblue;
      position: absolute;
      left: 0;
      right: 0;
      border-radius: 50%;
    }

  </style>
</head>
<body>
<div class="box move" style="background: deepskyblue;z-index: 10" id="box"></div>
<div class="box move" style="background: red;z-index: 9" ></div>
<div class="box move" style="background: orange;z-index: 8"></div>
<div class="box move" style="background: yellow;z-index: 7"></div>
<div class="box move" style="background: green;z-index: 6"></div>
<div class="box move" style="background: blue;z-index: 5"></div>
<div class="box move" style="background: pink;z-index: 4"></div>
<div class="box move" style="background: purple;z-index: 3"></div>

<script>
  // https://ithelp.ithome.com.tw/articles/10187999
  const {range, interval, zip, fromEvent, from} = rxjs;
  const {map, tap, mergeMap, startWith, mapTo, filter, throttleTime, debounceTime, repeat, switchMap, takeUntil} = rxjs.operators;

  let boxes = document.getElementsByClassName('move')
  let box = document.getElementById('box')
  // 使用 zip 操作符构造一个由 boxes 组成的流
  const boxes$ = from([...boxes])
  boxes$.subscribe(i => console.log('boxes$', i))
  // const delayBoxes$ = boxes$.pipe(
  //   // zip(
  //   //   startWith(0),
  //   //   interval(100),
  //   // )
  //   //   interval(100),
  // )
  let delayBoxes$ = zip(
    interval(100),
    boxes$
  )
  // delayBoxes$.subscribe(
  //   console.log
  // )

  let mousedown = fromEvent(box, 'mousedown')
  let mouseup = fromEvent(document, 'mouseup')
  let mousemove = fromEvent(document, 'mousemove')

  function setPosition(elem, position) {
    elem.style['left'] = position.x + 'px'
    elem.style['top'] = position.y + 'px'
  }


  function getPosition(elem) {
    return {
      x: +elem.style.left.replace('px', ''),
      y: +elem.style.top.replace('px', ''),
    }
  }


  mousedown.pipe(
    map(({x: clickX, y: clickY}) => {
        let {x: initX, y: initY} = getPosition(box)
        return {
          initX, initY, clickX, clickY, clickTime: +new Date()
        }
      }
    )).pipe(
    switchMap(({initX, initY, clickX, clickY, clickTime}) => {
      return mousemove.pipe(
        map(e => {
          let dx = e.x - clickX
          let dy = e.y - clickY
          return {
            x: initX + dx,
            y: initY + dy,
            time: +new Date() - clickTime
          }
        }),
        takeUntil(mouseup),
      )


    }),
    mergeMap(
      (position) => {
        // console.log('merge', position)
        return delayBoxes$.pipe(
          tap(
            ([_, box]) => {
              console.log('box position', box, position)
              setPosition(box, position)
            }
          )
        )
      }
    ),
    repeat()
  ).subscribe(console.log)
</script>
</body>
</html>
来源：oschina
链接：https://my.oschina.net/ahaoboy/blog/3164828
标签
box
position
return
boxes