https://codesandbox.io/s/pedantic-roentgen-s514z?file=/src/index.js
import "./styles.css"; import { fromEvent } from "rxjs"; import { switchMap, takeUntil } from "rxjs/operators"; let el = document.getElementById("box0"); const mousedown$ = fromEvent(el, "mousedown"); const mousemove$ = fromEvent(document, "mousemove"); const mouseup$ = fromEvent(document, "mouseup"); const drag$ = mousedown$.pipe( switchMap(() => mousemove$.pipe(takeUntil(mouseup$))) ); drag$.subscribe((e) => { console.log(e); el.style.left = `${e.clientX}px`; el.style.top = `${e.clientY}px`; });Notando algún retraso visual en el efecto de arrastrar y soltar en la interfaz de usuario. ¿Hay algún comentario sobre la forma en que uso las extensiones reactivas que podría estar causando esto?
No hay nada de malo en la forma en que usa Rx en este ejemplo. Si desea aumentar el rendimiento, simplemente elimine console.log y tal vez use la propiedad de traducción CSS para el movimiento cuadrado.