Angular+rxjs がドラッグアンドドロップ機能をどのように実装するかを簡単に分析します。-jsチュートリアル-php.cn

Angular+rxjs がドラッグアンドドロップ機能をどのように実装するかを簡単に分析します。

青灯夜游

リリース： 2022-05-20 20:26:21

転載

3149 人が閲覧しました

Angular rxjs でドラッグアンドドロップ機能を実装するにはどうすればよいですか?次の記事では、Angular が rxjs を組み合わせてドラッグアンドドロップを実装する方法を紹介します。

Angular+rxjs がドラッグアンドドロップ機能をどのように実装するかを簡単に分析します。

前回の記事では、Angular でのカスタムビデオ操作について学習しました。これを経験したことがない読者は、まずそれについて学ぶことができます。

このような需要がある今、それをどのように実現しますか?

ページ上のvideoタグにおいて、スクロールの高さがその位置を超える場合、表示領域内で自由にドラッグできるように設定してください。

素晴らしい アイデア 、Angular の @angular/cdk/drag-drop を使用すれば、簡単に実現できます, ただし、ここではツールを使用しません。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

わかりました、実装のアイデアを分析しましょう:

ページのスクロールの高さが位置よりも大きいですビデオの : 次に、ビデオの bottom 値は、ビジュアルウィンドウの値に対して 0 未満である必要があります。video をラップする div を設定する必要があります。計算を容易にするための タグとその高さ video の元の高さです。つまり、要素は元のドキュメントレイアウトの外にあります。
video 要素はドラッグアンドドロップできます。その後、その位置を fixed## に変更する必要があります。
#video 要素が視覚領域内で自由にドラッグされている場合、その top、left の値を制限する必要があります

そこで、次の

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>

ログイン後にコピー

には、次の事前定義されたスタイルがあります。

<!-- 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 布局的样式，默认布局中是没有的 -->
  &.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 もここで紹介されています。手術。

この要素は元のドキュメントのレイアウトから外れています

video 要素の重要な調整を分析したところですドキュメントの外:

video の外側の div、つまり # の相対ビューの bottom < 0 アンカー要素。

@ViewChild(&#39;anchor&#39;, { static: false })
public anchor!: ElementRef;
@ViewChild(&#39;video&#39;, { static: false })
public video!: ElementRef;

public scroll!: any;

ngAfterViewInit(): void {
  this.scroll = fromEvent(document, &#39;scroll&#39;);
  this.scrollFn();
}

// 页面滚动
public scrollFn() {
  this.scroll
    .pipe(
      debounceTime(50), // 防抖
      map(() => this.anchor.nativeElement.getBoundindClientRect().bottom < 0)
    )
    .subscribe((flag: boolean) => {
      // 添加和移除样式
      if(flag) {
        this.video.nativeElement.classList.add(&#39;video-fixed&#39;);
      } else {
        this.video.nativeElement.classList.remove(&#39;video-fixed&#39;);
      }
    })
}

ログイン後にコピー

Angular+rxjs がドラッグアンドドロップ機能をどのように実装するかを簡単に分析します。 ##最初に

anchor

要素オブジェクトを取得し、ページオブジェクト document (追加しました) のスクロールを監視します。ここで手ぶれ補正機能の最適化)、bottom < 0 の場合、関連スタイル video-fixed を video に追加します。

要素のドラッグ次のステップは、

video

要素のドラッグを実現することです。ここでは、 video 要素の 3 つのイベント、つまりマウスダウン mousedown、マウス移動 mousemove、およびマウスアップ mouseup をリッスンする必要があります。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// demo.component.ts public mouseDown!: any; public mouseUp!: any; public mouseMove!: any; ngAfterViewInit(): void { this.mouseDown = fromEvent(this.video.nativeElement, &#39;mousedown&#39;); // 目标元素按下，即 video this.mouseMove = fromEvent(document, &#39;mousemove&#39;); // 元素在文档内移动 this.mouseUp = fromEvent(document, &#39;mouseup&#39;); // 鼠标抬起 this.moveFn() } // 目标元素移动 public moveFn() { this.mouseDown .pipe( filter(() => this.video.nativeElement.classList.contains(&#39;video-fixed&#39;)), map(() => this.mouseMove.pipe( throttleTime(50), // 节流 takeUntil(this.mouseUp) )), // concatAll 顺序接受上游抛出的各个数据流作为它的数据，若前面的数据流不能同步的完结，它会暂存后续数据流，当前数据流完成后它才会订阅后一个暂存的数据流 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 + &#39;px&#39;; this.video.nativeElement.style.left = position.x + &#39;px&#39;; }) } // 校验边界值 public validValue = (value:number, max:number, min: number) => { return Math.min(Math.max(value, min), max) }</pre><div class="contentsignin">ログイン後にコピー</div></div> ターゲット要素 (フィルター関数) がマウスによって押されたことをリッスンし、マウスは </p>document<p> の範囲 (ここではスロットル関数で最適化されています) 内で移動できるようになります。マウスを上げます。移動中に、ターゲット要素の相対視覚ウィンドウの左と上までの距離が計算され、その値が <code>left と top に割り当てられます。ここで計算します

move.clientX - down.offsetX、window.innerWidth - this.video.nativeElement.offsetWidth

、関連する概念についてはあまり明確ではないかもしれませんが、実際にはそうではありません。問題は、上記の内容、考え方を理解するだけです。関連する知識ポイントは次の記事で紹介します。最終的に得られた効果は次のとおりです。

Angular+rxjs がドラッグアンドドロップ機能をどのように実装するかを簡単に分析します。 [終了]