使用Rxjs实现的拖放不起作用

import { fromEvent } from 'rxjs';
import { takeUntil, switchMap, map, tap } from 'rxjs/operators';

const draggableElement = document.getElementById('draggable');
const containerElement = document.getElementById('container');

const mouseDown$ = fromEvent(draggableElement, 'mousedown');
const mouseMove$ = fromEvent(document, 'mousemove');
const mouseUp$ = fromEvent(document, 'mouseup');

mouseDown$.pipe(
  switchMap((startEvent) => {
    const initialX = startEvent.clientX - draggableElement.offsetLeft;
    const initialY = startEvent.clientY - draggableElement.offsetTop;

    return mouseMove$.pipe(
      map((moveEvent) => {
        moveEvent.preventDefault();
        return {
          x: moveEvent.clientX - initialX,
          y: moveEvent.clientY - initialY,
        };
      }),
      takeUntil(mouseUp$)
    );
  })
).subscribe((position) => {
  draggableElement.style.left = position.x + 'px';
  draggableElement.style.top = position.y + 'px';
});