拖拽玩出花儿来——Angular 结合 RxJS 实现视频拖拽功能

前端

2023-09-10 01:29:59

网页设计中，灵活操作视频元素必不可少。试想一下，当用户向下滚动页面时，视频还能在视野范围内自由移动，是不是瞬间酷炫值暴增？今天，我们将使用 Angular 和 RxJS 联手出击，打造这个炫酷功能，让你体验视频拖拽的无限可能。

技术栈简介

Angular：作为前端开发的利器，Angular 以其模块化、响应式和数据绑定等特性，深受开发者喜爱。
RxJS：一个基于响应式编程理念的 JavaScript 库，旨在处理异步数据流。

解决方案构思

要实现视频拖拽功能，我们首先需要监听滚动事件。当滚动高度超过视频元素时，将其设置为绝对定位，并开启拖拽监听。

具体实现

监听滚动事件

import { fromEvent } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'my-video',
  template: `<video #video></video>`
})
export class VideoComponent implements AfterViewInit {
  @ViewChild('video') video!: ElementRef;

  ngAfterViewInit(): void {
    fromEvent(window, 'scroll')
      .pipe(
        map(() => this.video.nativeElement.getBoundingClientRect().top)
      )
      .subscribe((top) => {
        if (top < 0) {
          // 视频已超出可视区域
          this.setDraggable(true);
        } else {
          // 视频仍在可视区域
          this.setDraggable(false);
        }
      });
  }

  setDraggable(draggable: boolean): void {
    if (draggable) {
      // 设置视频为绝对定位
      this.video.nativeElement.style.position = 'absolute';
      // 启用拖拽监听
      this.enableDrag();
    } else {
      // 禁用拖拽监听
      this.disableDrag();
    }
  }
}

启用/禁用拖拽

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

enableDrag(): void {
  let dragStart: Observable<MouseEvent>;

  dragStart = fromEvent(this.video.nativeElement, 'mousedown')
    .pipe(
      map((e: MouseEvent) => ({
        x: e.clientX,
        y: e.clientY,
        top: this.video.nativeElement.offsetTop,
        left: this.video.nativeElement.offsetLeft
      })),
      shareReplay(1)
    );

  dragStart
    .pipe(
      switchMap((start) => {
        return fromEvent(document, 'mousemove')
          .pipe(
            map((e: MouseEvent) => ({
              x: e.clientX - start.x,
              y: e.clientY - start.y
            })),
            takeUntil(fromEvent(document, 'mouseup'))
          );
      })
    )
    .subscribe(({ x, y }) => {
      this.video.nativeElement.style.top = `${start.top + y}px`;
      this.video.nativeElement.style.left = `${start.left + x}px`;
    });
}

disableDrag(): void {
  // 禁用拖拽监听
}