如何通过Angular的RxJS模块实现拖动交互功能？

本文共计1483个文字，预计阅读时间需要6分钟。

Angular + RxJS 实现拖拽功能，以下本章节为大家介绍一种 Angular + RxJS 结合实现拖拽的方法，希望对大家有所帮助！

在之前的文章中，我们学习了 Angular 中自定义 Video 操作，但没有涉及到拖拽功能。本文将介绍如何使用 Angular 和 RxJS 实现拖拽功能。

Angular+rxjs怎么实现拖拽功能？下面本篇文章给大家介绍一下Angular 结合 rxjs 实现拖拽的方法，希望对大家有所帮助！

在之前的文章，我们学习了 Angular 中自定义 Video 操作，没有度过的读者可先了解。

现在有这么一个需求，你会怎么实现呢？

页面中 video 标签，当滚动高度超过其位置之后，将其设置为可在可视区域自由拖拽。

一个不错的 Idea，如果你使用 Angular 的 @angular/cdk/drag-drop 可以轻松实现，但是我们这里不使用工具。

好吧，我们来分析下实现的思路：

• 页面滚动高度大于视频所在的位置：那么就是视频的 bottom 值相对可视窗口的值要小于0，我们需要设定一个包裹 video 标签的 div 方便计算，其高度是原设定 video 的高度。