Angular+rxjs怎么實(shí)現(xiàn)拖拽功能？下面本篇文章給大家介紹一下Angular 結(jié)合 rxjs 實(shí)現(xiàn)拖拽的方法，希望對大家有所幫助！

在之前的文章，我們學(xué)習(xí)了 Angular 中自定義 Video 操作，沒有度過的讀者可先了解。

現(xiàn)在有這么一個(gè)需求，你會(huì)怎么實(shí)現(xiàn)呢？

頁面中 video 標(biāo)簽，當(dāng)滾動(dòng)高度超過其位置之后，將其設(shè)置為可在可視區(qū)域自由拖拽。

一個(gè)不錯(cuò)的 Idea，如果你使用 Angular 的 @angular/cdk/drag-drop 可以輕松實(shí)現(xiàn)，但是我們這里不使用工具?！鞠嚓P(guān)教程推薦：《angular教程》】

好吧，我們來分析下實(shí)現(xiàn)的思路：

• 頁面滾動(dòng)高度大于視頻所在的位置：那么就是視頻的 bottom 值相對可視窗口的值要小于0，我們需要設(shè)定一個(gè)包裹 video 標(biāo)簽的 div 方便計(jì)算，其高度是原設(shè)定 video 的高度。即元素脫離原文檔布局
• video 元素可以拖拽，那么其定位需要被改變?yōu)?fixed
• video 元素在可視區(qū)內(nèi)自由拖動(dòng)，那么需要對其 top, left 值進(jìn)行限定

所以我們設(shè)定下面的 demo 布局：

<div id="anchor" #anchor>   <div class="video" id="video" #video>     <div class="masker"></div>     <video width="100%" height="100%" controls poster="assets/poster.png">       <source src="../assets/demo.mp4" type="video/mp4" />       Your browser does not support.     </video>   </div> </div>

有下面這些預(yù)定的樣式：

<!-- styles.scss --> <!-- 這部分需要放在全局樣式中 --> html, body {   height: 6000px;   background-color: #fff; }

<!-- demo.component.scss -->  #anchor {   height: 360px;   width: 100%;   background-color: #F0F0F0; }  .video {   width: 640px;   height: 360px;   margin: 0 auto;   background-color: black;   <!-- video fixed 布局的樣式，默認(rèn)布局中是沒有的 -->   &.video-fixed {      position: fixed;     top: 10px;     left: 10px;     width: 320px;     height: 150px;     cursor: all-scroll;     .masker {          display: none;       }     &:hover {       .masker {         display: block;         position: absolute;         width: 100%;         height: 100%;         background-color: rgba(0, 0, 0, 0.8);         z-index: 2;       }     }   } }

這里還引入了 rxjs 來操作。

元素脫離原文檔布局

剛才已經(jīng)分析了 video 元素脫離文檔的臨界調(diào)節(jié)了：

video 的外 div，即 #anchor 元素的相對視圖的 bottom < 0。所以我們有：

@ViewChild('anchor', { static: false }) public anchor!: ElementRef; @ViewChild('video', { static: false }) public video!: ElementRef;  public scroll!: any;  ngAfterViewInit(): void {   this.scroll = fromEvent(document, 'scroll');   this.scrollFn(); }  // 頁面滾動(dòng) public scrollFn() {   this.scroll     .pipe(       debounceTime(50), // 防抖       map(() => this.anchor.nativeElement.getBoundindClientRect().bottom < 0)     )     .subscribe((flag: boolean) => {       // 添加和移除樣式       if(flag) {         this.video.nativeElement.classList.add('video-fixed');       } else {         this.video.nativeElement.classList.remove('video-fixed');       }     }) }

先獲取 anchor 元素對象，監(jiān)聽頁面對象 document 滾動(dòng)（我們這里加入了防抖函數(shù)優(yōu)化），當(dāng) bottom < 0 的時(shí)候，將相關(guān)的樣式 video-fixed 添加給 video 。

元素拖拽

接下來就是實(shí)現(xiàn) video 元素的拖拽。這里我們要監(jiān)聽 video 元素的三個(gè)事件，分別是鼠標(biāo)按下 mousedown，鼠標(biāo)移動(dòng) mousemove 和鼠標(biāo)抬起 mouseup。

// demo.component.ts  public mouseDown!: any; public mouseUp!: any; public mouseMove!: any;  ngAfterViewInit(): void {   this.mouseDown = fromEvent(this.video.nativeElement, 'mousedown'); // 目標(biāo)元素按下，即 video   this.mouseMove = fromEvent(document, 'mousemove'); // 元素在文檔內(nèi)移動(dòng)   this.mouseUp = fromEvent(document, 'mouseup'); // 鼠標(biāo)抬起      this.moveFn() }  // 目標(biāo)元素移動(dòng) public moveFn() {   this.mouseDown     .pipe(       filter(() => this.video.nativeElement.classList.contains('video-fixed')),       map(() => this.mouseMove.pipe(         throttleTime(50), // 節(jié)流         takeUntil(this.mouseUp)       )),       // concatAll 順序接受上游拋出的各個(gè)數(shù)據(jù)流作為它的數(shù)據(jù)， 若前面的數(shù)據(jù)流不能同步的完結(jié)，它會(huì)暫存后續(xù)數(shù)據(jù)流，當(dāng)前數(shù)據(jù)流完成后它才會(huì)訂閱后一個(gè)暫存的數(shù)據(jù)流       concatAll(),       withLatestFrom(this.mouseDown, (move:any, down:any) => {         return {           x: this.validValue(move.clientX - down.offsetX, window.innerWidth - this.video.nativeElement.offsetWidth, 0),           y: this.validValue(move.clientY - down.offsetY, window.innerHeight - this.video.nativeElement.offsetHeight, 0)         }       })     )     .subscribe((position: {       x: number,       y: number     }) => {       this.video.nativeElement.style.top = position.y + 'px';       this.video.nativeElement.style.left = position.x + 'px';     }) }  // 校驗(yàn)邊界值 public validValue = (value:number, max:number, min: number) => {   return Math.min(Math.max(value, min), max) }

我們監(jiān)聽目標(biāo)元素（filter 函數(shù)）被鼠標(biāo)按下，然后鼠標(biāo)可以在 document 范圍內(nèi)移動(dòng)（這里用節(jié)流函數(shù)優(yōu)化了下），直到監(jiān)聽到鼠標(biāo)抬起。在移動(dòng)的過程中，計(jì)算目標(biāo)元素的相對可視窗口左側(cè)和頂部的距離，將值賦予到 left 和 top。

這里的計(jì)算 move.clientX - down.offsetX, window.innerWidth - this.video.nativeElement.offsetWidth，相關(guān)的概念也許你不是很清楚，不過沒關(guān)系，上面的內(nèi)容，理解思路即可。相關(guān)的知識點(diǎn)會(huì)在接下來的文章介紹。

最后，我們得到的效果如下

【完】