首页- 站长资讯 技术文章  浅析Angular+rxjs怎么实现拖拽功能?

浅析Angular+rxjs怎么实现拖拽功能?

 0  1月前

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

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

现在有这么一个需求,你会怎么实现呢?

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

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

好吧,我们来分析下实现的思路:

页面滚动高度大于视频所在的位置:那么就是视频的 bottom 值相对可视窗口的值要小于0,我们需要设定一个包裹 video 标签的 div 方便计算,其高度是原设定 video 的高度。即元素脱离原文档布局

video 元素可以拖拽,那么其定位需要被改变为 fixed

video 元素在可视区内自由拖动,那么需要对其 topleft 值进行限定

所以我们设定下面的 demo 布局:

  1. <div id="anchor" #anchor>
  2.   <div class="video" id="video" #video>
  3.     <div class="masker"></div>
  4.     <video width="100%" height="100%" controls poster="assets/poster.png">
  5.       <source src="../assets/demo.mp4" type="video/mp4" />
  6.       Your browser does not support.
  7.     </video>
  8.   </div>
  9. </div>

有下面这些预定的样式:

  1. <!-- styles.scss -->
  2. <!-- 这部分需要放在全局样式中 -->
  3. html, body {
  4.   height: 6000px;
  5.   background-color: #fff;
  6. }
  1. <!-- demo.component.scss -->
  2.  
  3. #anchor {
  4.   height: 360px;
  5.   width: 100%;
  6.   background-color: #F0F0F0;
  7. }
  8.  
  9. .video {
  10.   width: 640px;
  11.   height: 360px;
  12.   margin: 0 auto;
  13.   background-color: black;
  14.   <!-- video fixed 布局的样式,默认布局中是没有的 -->
  15.   &.video-fixed { 
  16.     position: fixed;
  17.     top: 10px;
  18.     left: 10px;
  19.     width: 320px;
  20.     height: 150px;
  21.     cursor: all-scroll;
  22.     .masker {
  23.          display: none;
  24.       }
  25.     &:hover {
  26.       .masker {
  27.         display: block;
  28.         position: absolute;
  29.         width: 100%;
  30.         height: 100%;
  31.         background-color: rgba(0, 0, 0, 0.8);
  32.         z-index: 2;
  33.       }
  34.     }
  35.   }
  36. }

这里还引入了 rxjs 来操作。

 

元素脱离原文档布局

刚才已经分析了 video 元素脱离文档的临界调节了:

video 的外 div,即 #anchor 元素的相对视图的 bottom < 0。所以我们有:

  1. @ViewChild('anchor', { static: false })
  2. public anchor!: ElementRef;
  3. @ViewChild('video', { static: false })
  4. public video!: ElementRef;
  5.  
  6. public scroll!: any;
  7.  
  8. ngAfterViewInit(): void {
  9.   this.scroll = fromEvent(document, 'scroll');
  10.   this.scrollFn();
  11. }
  12.  
  13. // 页面滚动
  14. public scrollFn() {
  15.   this.scroll
  16.     .pipe(
  17.       debounceTime(50), // 防抖
  18.       map(() => this.anchor.nativeElement.getBoundindClientRect().bottom < 0)
  19.     )
  20.     .subscribe((flag: boolean) => {
  21.       // 添加和移除样式
  22.       if(flag) {
  23.         this.video.nativeElement.classList.add('video-fixed');
  24.       } else {
  25.         this.video.nativeElement.classList.remove('video-fixed');
  26.       }
  27.     })
  28. }

 

 

先获取 anchor 元素对象,监听页面对象 document 滚动(我们这里加入了防抖函数优化),当 bottom < 0 的时候,将相关的样式 video-fixed 添加给 video 。

 

元素拖拽

接下来就是实现 video 元素的拖拽。这里我们要监听 video 元素的三个事件,分别是鼠标按下 mousedown,鼠标移动 mousemove 和鼠标抬起 mouseup

  1. // demo.component.ts
  2.  
  3. public mouseDown!: any;
  4. public mouseUp!: any;
  5. public mouseMove!: any;
  6.  
  7. ngAfterViewInit(): void {
  8.   this.mouseDown = fromEvent(this.video.nativeElement, 'mousedown'); // 目标元素按下,即 video
  9.   this.mouseMove = fromEvent(document, 'mousemove'); // 元素在文档内移动
  10.   this.mouseUp = fromEvent(document, 'mouseup'); // 鼠标抬起
  11.    
  12.   this.moveFn()
  13. }
  14.  
  15. // 目标元素移动
  16. public moveFn() {
  17.   this.mouseDown
  18.     .pipe(
  19.       filter(() => this.video.nativeElement.classList.contains('video-fixed')),
  20.       map(() => this.mouseMove.pipe(
  21.         throttleTime(50), // 节流
  22.         takeUntil(this.mouseUp)
  23.       )),
  24.       // concatAll 顺序接受上游抛出的各个数据流作为它的数据, 若前面的数据流不能同步的完结,它会暂存后续数据流,当前数据流完成后它才会订阅后一个暂存的数据流
  25.       concatAll(),
  26.       withLatestFrom(this.mouseDown, (move:any, down:any) => {
  27.         return {
  28.           x: this.validValue(move.clientX - down.offsetX, window.innerWidth - this.video.nativeElement.offsetWidth, 0),
  29.           y: this.validValue(move.clientY - down.offsetY, window.innerHeight - this.video.nativeElement.offsetHeight, 0)
  30.         }
  31.       })
  32.     )
  33.     .subscribe((position: {
  34.       x: number,
  35.       y: number
  36.     }) => {
  37.       this.video.nativeElement.style.top = position.+ 'px';
  38.       this.video.nativeElement.style.left = position.+ 'px';
  39.     })
  40. }
  41.  
  42. // 校验边界值
  43. public validValue = (value:number, max:number, min: number) => {
  44.   return Math.min(Math.max(value, min), max)
  45. }

我们监听目标元素(filter 函数)被鼠标按下,然后鼠标可以在 document 范围内移动(这里用节流函数优化了下),直到监听到鼠标抬起。在移动的过程中,计算目标元素的相对可视窗口左侧和顶部的距离,将值赋予到 left 和 top

这里的计算 move.clientX - down.offsetX, window.innerWidth - this.video.nativeElement.offsetWidth,相关的概念也许你不是很清楚,不过没关系,上面的内容,理解思路即可。相关的知识点会在接下来的文章介绍。

最后,我们得到的效果如下

 

相关说明:

1、VIP会员无限制任意下载,免积分。 立即前往开通>>

2、本站资源大多存储在云盘,如出现链接失效请评论反馈。

3、本站提供的源码、模板、软件工具等其他资源,均不包含技术服务,请大家谅解!资源仅供参考学习只用,请勿用于任何商业用途,请支持正版。

4、源码、模板等资源会随着技术、坏境的升级而存在部分问题,还请慎重选择。


本文网址:http://www.zzdaima.com/14/40.html
转载请声明来自: 站长代码- 浅析Angular+rxjs怎么实现拖拽功能?

教程搜索
热门技术文章
  • 关于域名历史的查询和处理

    关于域名历史的查询和处理

    一、域名历史是什么意思?域名历史,是指域名首次注册的时间、域名持有者更新、域名网站所属行业变更、域名是否被降权或K站、域名历史PR值、域名历史的外链建设情况、域名年龄等等。二、域名历史对SEO有影响因素马慧SEO简单列出几点域名历史对网站优化的影响:①域名历史是否

  • pbootcms伪静态教程

    pbootcms伪静态教程

    Apache环境和IIS环境默认在根目录加了伪静态规则了,不需要操作,只要主机支持伪静态即可。 Nginx环境,请打开nginx.txt文件,把里面的代码复制到配置中,下面我们以宝塔为例, 伪静态规则的文件在 这样就完成了

  • 网站建设这些东西我们需要设置好

    网站建设这些东西我们需要设置好

    一、建站的需求及目的建站的目的时什么,需求又是什么,依据自己的需求及行业的对比,大概做出一个小的预算。通常情况下,若作为单一的企业网站,建站费用不高,若需要定制开发的话,定制开发所需要的费用肯定比一般的企业网站要高,网站定制开发流程:沟通确定需求-出设计效

  • 怎么样才能写出打动读者的文案

    怎么样才能写出打动读者的文案

    第一,标题要准确简洁一篇高质量的文章内容,首先必须要有一个简洁明确的题目标题,能够让读者一下就可以抓住你要表达的文章意思。而有些SEO优化人员,为了图省事,往往采用采集文章的方式更新内容,但又考虑到雷同性太高,于是就随便更换一个文章标题了事。这样做的后果就是

  • 寻找合适的关键词给网站创收

    寻找合适的关键词给网站创收

    选择垂直行业领域关键词大家在选择关键词的时候,记住一定不能太宽泛,因为我们是个人站长,不可能投入那么多的人力物力去经营一个有大量内容的网站,如果网站主体太广,我们是根本没有精力去管理的,那么排名自然也是无法上来的,这里如风SEO强烈建议大家一定要找准一个垂直

  • 可能被我们忽视的影响排名因素

    可能被我们忽视的影响排名因素

    一、质量高的原创内容在这个越来越注重内容的时代,各位站长要想在百度、360等搜索引擎获得不菲的流量,那必须注重网站内容的原创性。独特的实质性的并且是高质量的原创内容,极大的影响着网站的收录和排名。现下正火热的熊掌号就是百度针对原创内容的一次尝试,高质量的原创

热门推荐

SEO按天关键词计费排名查询系统...

热门推荐  53    1月前

软件功能:1.会员管理:系统共分三级会员流程。总站管理员,代理,...

仿清风DJ舞曲网V4.1+CSCMS音乐...

热门推荐  56    1月前

CSCMSV4.1仿清风dj舞曲网音乐网站源码,程序是CSCMSV4.1UTF8编码...

爱看小说网2W本源码全站打包源...

热门推荐  59    1月前

本次给大家带来的是价值500元的狂雨小说二开版上传源码解压后/co...

APP软件应用下载导航网站源码/...

热门推荐  59    1月前

APP软件应用下载导航网站源码/APP分享下载页引流导航网站源码带后...

健身类小程序前后端源码

热门推荐  109    2月前

健身类小程序前后端源码环境要求:PHP>=7.0(推荐7.2+)Laravel5...

抖音云蹦迪源码 2022年很火的直...

热门推荐  230    2月前

外面卖600的抖音云蹦迪直播间项目,靠直播打赏收益的风口项目分享...


关于我们 联系我们 免责声明 共享规则 SiteMap 站长代码所有作品均为会员提供或网上搜集,版权归原作者所有,如需商业用途或转载请与原作者联系

Copyright © 2022  站长代码版权所有 辽ICP备2021012267号-1 辽公网安备 21012202000096号 所提供的内容仅供观摩学习交流之用,请勿用作商业用途!如有侵权,请及时 联系我们删除

第三方账号一键登录