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('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();
}

// 页面滚动
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;);
      }
    })
}

##最初に

要素オブジェクトを取得し、ページ オブジェクト document (追加しました) のスクロールを監視します。ここで手ぶれ補正機能の最適化)、bottom < 0 の場合、関連スタイル video-fixed を 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, &amp;#39;mousedown&amp;#39;); // 目标元素按下，即 video this.mouseMove = fromEvent(document, &amp;#39;mousemove&amp;#39;); // 元素在文档内移动 this.mouseUp = fromEvent(document, &amp;#39;mouseup&amp;#39;); // 鼠标抬起 this.moveFn() } // 目标元素移动 public moveFn() { this.mouseDown .pipe( filter(() =&gt; this.video.nativeElement.classList.contains(&amp;#39;video-fixed&amp;#39;)), map(() =&gt; this.mouseMove.pipe( throttleTime(50), // 节流 takeUntil(this.mouseUp) )), // concatAll 顺序接受上游抛出的各个数据流作为它的数据， 若前面的数据流不能同步的完结，它会暂存后续数据流，当前数据流完成后它才会订阅后一个暂存的数据流 concatAll(), withLatestFrom(this.mouseDown, (move:any, down:any) =&gt; { 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 }) =&gt; { this.video.nativeElement.style.top = position.y + &amp;#39;px&amp;#39;; this.video.nativeElement.style.left = position.x + &amp;#39;px&amp;#39;; }) } // 校验边界值 public validValue = (value:number, max:number, min: number) =&gt; { return Math.min(Math.max(value, min), max) }</pre><div class="contentsignin">ログイン後にコピー</div></div> ターゲット要素 (フィルター関数) がマウスによって押されたことをリッスンし、マウスは </p>document<p> の範囲 (ここではスロットル関数で最適化されています) 内で移動できるようになります。マウスを上げます。移動中に、ターゲット要素の相対視覚ウィンドウの左と上までの距離が計算され、その値が <code>left と top に割り当てられます。 ここで計算します

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

[終了]

プログラミング関連の知識については、次のサイトを参照してください。

! ！

以上がAngular+rxjs がドラッグ アンド ドロップ機能をどのように実装するかを簡単に分析します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。