Angular 4を使用してコンポーネントにMouseEventをより適切に実装するにはどうすればよいですか？

debugcn 投稿 Dev

ジャンコボスカン

私はこの実用的なプランカーの例を持っています、あなたはマウスをドラッグしてカードを選択することができます。

私の問題は、コードにたくさんのバグがあり、このデモに似た何かをしたいということです

ここで私が修正したいこと（img1とimg2 -img＃2のカードは以前にクリックされていた）、別のことは、マウスを速くドラッグするとカードが選択されないことがあるということです。

これが私のコンポーネントコードです

export class App {

  private dragStart:number = 0;
  private dragOver:number = 0;
  public users:Array<{id?: number; name: string; admin: boolean;}> = [
        { name: 'Alexis Wursten', admin: false  },
        { name: 'Janco Boscan', admin: true  },
        { name: 'Noemi Iturralde', admin: false  },
    ];
  public added: string[] = [];
  x1 = 0; y1 = 0; x2 = 0; y2 = 0;

  @ViewChild('selector') selector: ElementRef;

  constructor(private renderer: Renderer2) {
  }

  isRectangeVisible = false;
  isMouseDown = false;

  @HostListener('mousedown', ['$event'])
  onMouseDown(ev) {
    this.dragStart = ev.clientY;
    this.isMouseDown = true;

  }

  @HostListener('document:mouseup', ['$event'])
  onMouseUp(ev) {
    this.dragStart = 0;
    this.dragOver = 0;
    this.renderer.setStyle(this.selector.nativeElement, 'display', 'none');
    this.isRectangeVisible = false;
    this.isMouseDown = false;
  }

  @HostListener('document:mousemove', ['$event'])
  onMouseMove(ev) {

    if(!this.isRectangeVisible && this.isMouseDown){
      this.renderer.setStyle(this.selector.nativeElement, 'display', 'block');
      this.x1 = ev.clientX;
      this.y1 = ev.clientY;
      this.isRectangeVisible = true;
    }

    this.x2 = ev.clientX;
    this.y2 = ev.clientY;
    this.reCalc();
  }

  reCalc() {
    const x3 = Math.min(this.x1, this.x2);
    const x4 = Math.max(this.x1, this.x2);
    const y3 = Math.min(this.y1, this.y2);
    const y4 = Math.max(this.y1, this.y2);
    this.renderer.setStyle(this.selector.nativeElement, 'left', x3 + 'px');
    this.renderer.setStyle(this.selector.nativeElement, 'top', y3 + 'px');
    this.renderer.setStyle(this.selector.nativeElement, 'width', x4 - x3 + 'px');
    this.renderer.setStyle(this.selector.nativeElement, 'height', y4 - y3 + 'px');
  }

  onSelecUser(item) {
        if(this.added.indexOf(item.name)===-1) { // or compare by id
            this.added = this.added.concat([item.name]);
        }
        else {
            this.added = this.added.filter((x) => item.name!==x); // or compare by id
        }

        item.selected = !item.selected ? true : false;
    }

    onMouseOver(ev, item) {
        if(ev.which!==1) {
            return false;
        }

        ev.preventDefault();

        if(ev.type==='mouseenter' && !item.selected) {
            this.dragOver = ev.clientY - this.dragStart > 0 ? 1:-1;
            this.onSelecUser(item);
            return false;
        }

        if(ev.type==='mouseleave') {
            if(this.dragOver===1 && ev.clientY < ev.target.offsetTop && item.selected) {
                console.log('desel...', item);
                this.onSelecUser(item);
                return false;
            }
            if(this.dragOver===-1 && ev.clientY > ev.target.offsetTop && item.selected) {
                console.log('desel...', item);
                this.onSelecUser(item);
                return false;
            }
        }
    }
}

読んでくれてありがとう。

ティモール

更新＃1： https ：//plnkr.co/edit/d9aTb0E0OKFfTSIAM0MY？p = preview

クリックでユーザーを選択/選択解除するオプションが追加されました。
そのため、リセットコードは必要ありません。

  @HostListener('mousedown', ['$event'])
  onMouseDown(ev) {
    this.dragStart = ev.clientY;
    this.isMouseDown = true;
  }

divのクリックハンドラーのみが変更されました。

(click)="onSelecPersona(user, !user.selected)"

最初の回答：変更されたコードは次のとおりです：https：//plnkr.co/edit/QryFWtLQwNuGkrtzDehm？p = preview

それはいくつかの問題を解決します：

（1）HTMLの選択：選択は「行」の境界から始まるため、「ユーザー選択」CSSは「行」にある必要があります。

.row {
  user-select: none;
  -moz-user-select: none;
}
.card-content {
  padding: 0;
}

（2）選択されたdivの処理：最初の実装は、ユーザーのdivでのマウスイベントに依存します。これは、「selector」長方形が「user」divの境界を決して超えない（つまり、回りますが、選択境界内にある）場合には対応しません。私の実装では、「selector」と「user」のdivのオーバーラップを計算して、ユーザーが選択したかどうかを判断します。

     <div class="card"
            #ucard   
            [attr.id]="user.name"
            [class.selected]="user.selected" 
            *ngFor="let user of users" 
            (click)="onSelecPersona(user, !user.selected)"
        >

    import {Component, NgModule, HostListener, Renderer2, ElementRef, ViewChild, ViewChildren } from '@angular/core'
    ...
     @ViewChildren('ucard') components: QueryList<ElementRef>;
    ...
      // return true if two HTML elements overlap 
      overlap(e1:ElementRef, e2:ElementRef){
        var rect1 = e1.getBoundingClientRect();
        var rect2 = e2.getBoundingClientRect();

        return !(
          rect1.top > rect2.bottom ||
          rect1.right < rect2.left ||
          rect1.bottom < rect2.top ||
          rect1.left > rect2.right
        ); 
      }

      // updates user selection based on the current "selector" 
      markSelected(){
        this.components.forEach(it=> {
          var overlaps: boolean = this.overlap(this.selector.nativeElement, it.nativeElement);
          this.onSelecPersona(this.users.find(u=> u.name == it.nativeElement.id), overlaps);
        });
      }

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]