Angular RxJS如何实现复杂拖拽交互功能？

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

Angular + RxJS 如何实现拖拽功能？本篇文章将为大家介绍一种Angular + RxJS 实现拖拽的方法，希望对大家有所帮助！在此之前，我们学习了Angular 中自定义 Video 操作，但没有过度解读。

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

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

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

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

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

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

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