1. 首页
  2. Language
  3. RxJS 笔记 11 rxjx6.4.0 拖拽

RxJS 笔记 11 rxjx6.4.0 拖拽

<body>
<div id="drag"></div>
</body>
html,
body {
  height: 100%;
  background-color: tomato;
  position: relative;
}

#drag {
  position: absolute;
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #fff;
  cursor: all-scroll;
}
import { fromEvent } from 'rxjs';

const dragDOM = document.querySelector('#drag');
const body = document.body;
let isMove = false;

fromEvent(dragDOM, 'mousedown').subscribe(() => {
    this.isMove = true;
});
fromEvent(body, 'mousemove').subscribe((event) => {
    if (isMove) {
        dragDOM.style.left = event.clientX + 'px';
        dragDOM.style.top = event.clientY + 'px';
    }
});
fromEvent(body, 'mouseup').subscribe(() => {
    isMove = false;
});