How do i avoid UI delay in drag and drop app using RxJS

user_1159915 0
Viewed 28

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`;
});

Noticing some delay visually in the drag and drop effect in the UI. Is there any feedback on the way i'm using reactive extensions that might be causing this?

drag delay

rxjs javascript
1 Answers

There is nothing wrong with the way you use Rx on this example. If you want to boost the performance just remove console.log and maybe use CSS translate property for square movement.

user_86183500
Related