这篇文章主要介绍“Angular+rxjs如何实现拖拽功能”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Angular+rxjs如何实现拖拽功能”文章能帮助大家解决问题。页面中 video 标签,当滚动高度超过其位置之后,将其设置为可在可视区域自由拖拽。一个不错的 Idea
,如果你使用 Angular
的 @angular/cdk/drag-drop
可以轻松实现,但是我们这里不使用工具。好吧,我们来分析下实现的思路:页面滚动高度大于视频所在的位置:那么就是视频的 bottom
值相对可视窗口的值要小于0,我们需要设定一个包裹 video
标签的 div
方便计算,其高度是原设定 video
的高度。即元素脱离原文档布局video
元素可以拖拽,那么其定位需要被改变为 fixed
video
元素在可视区内自由拖动,那么需要对其 top
, left
值进行限定所以我们设定下面的 demo
布局:有下面这些预定的样式:这里还引入了 rxjs
来操作。元素脱离原文档布局刚才已经分析了 video
元素脱离文档的临界调节了:video 的外 div
,即 #免费云主机、域名anchor
元素的相对视图的 bottom 。所以我们有:
先获取 anchor
元素对象,监听页面对象 document
滚动(我们这里加入了防抖函数优化),当 bottom 的时候,将相关的样式
元素拖拽接下来就是实现 video-fixed
添加给 video
。video
元素的拖拽。这里我们要监听 video
元素的三个事件,分别是鼠标按下 mousedown
,鼠标移动 mousemove
和鼠标抬起 mouseup
。我们监听目标元素(filter 函数)被鼠标按下,然后鼠标可以在 document
范围内移动(这里用节流函数优化了下),直到监听到鼠标抬起。在移动的过程中,计算目标元素的相对可视窗口左侧和顶部的距离,将值赋予到 left
和 top
。这里的计算 move.clientX - down.offsetX, window.innerWidth - this.video.nativeElement.offsetWidth
,相关的概念也许你不是很清楚,不过没关系,上面的内容,理解思路即可。关于“Angular+rxjs如何实现拖拽功能”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注云技术行业资讯频道,小编每天都会为大家更新不同的知识点。
这篇文章主要讲解了“React中的任务调度算法是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“React中的任务调度算法是什么”吧!React中的Fiber任务都应该知道吧,而且不同的Fiber任务有不同的…