Angular에서 순수 자바스크립트를 이용한 draggable 구현

이번 장에서 angular에서 제공하는 이벤트 나 플러그인 없이 순수 자바 스크립트를 이용하여 처리하는 방법에 대한 설명을 드리겠습니다. <br angular에서는 @ViewChild를 이용하여 dom을 인식하거나 HostListener 혹은 (keydown).. 등등을 이용하여 처리하는데 순수 자바스크립트를 이용하여도 잘 동작됩니다.

addEventListener의 경우 bind(this)를 사용해야 하고 removeEventListener 같은 경우 addEventListener 에 사용하던 function 을 그대로 사용해야 함으로 이것만을 this 로 올리는 것 외에는 기존과 거의 동일합니다.

export class Draggable implements AfterViewInit {
  private element: any;
  private touch: any;
  private binddragmove: any;
  private binddragend: any;

  ngAfterViewInit { // html을 이용해야 함으로 이곳에 정의하시는 것을 추천 드립니다.
    this.element = document.querySelector( '.domContainer' ); // document.querySelector 를 이용하여 element(dom) 정의
    this.element.addEventListener( 'touchstart', this.dragstart.bind(this), false );
    this.element.addEventListener( 'mousedown', this.dragstart.bind(this), false );
  }

  private dragstart(e: any) {
    console.log('eventstart: e >>', e);
    this.touch = ( e.type == 'touchstart' );
    this.binddragmove = this.dragmove.bind(this);
    this.binddragend = this.dragend.bind(this);
    window.addEventListener( ( this.touch ) ? 'touchmove' : 'mousemove', this.binddragmove, false );
    window.addEventListener( ( this.touch ) ? 'touchend' : 'mouseup', this.binddragend, false );
  }

  private dragmove ( event: any ) {

    const current = JSON.parse(JSON.stringify(this.eventposition.current));
    const old = this.eventposition.old;
    const start = this.eventposition.start;
    this.eventposition.old = current;
    this.getPositionCurrent( event );
    this.eventposition.delta = {x: (current.x - old.x), y: (current.y - old.y)};
    this.eventposition.drag = {x: (current.x - start.x), y: (current.y - start.y)};
    console.log('dragmove >> eventposition >>', JSON.parse(JSON.stringify(this.eventposition)))

  }

  private dragend( event: any ) {
    this.getPositionCurrent( event );
    window.removeEventListener( ( this.touch ) ? 'touchmove' : 'mousemove', this.binddragmove, false );
    window.removeEventListener( ( this.touch ) ? 'touchend' : 'mouseup', this.binddragend, false );
    console.log('dragend >> eventposition >>', JSON.parse(JSON.stringify(this.eventposition)))
  }

  private getPositionCurrent( event: any ) {
    const dragEvent = event.touches
      ? ( event.touches[ 0 ] || event.changedTouches[ 0 ] )
      : event;
    this.eventposition.current = { x: dragEvent.pageX, y: dragEvent.pageY };
    console.log('getPositionCurrent: ', JSON.parse(JSON.stringify(this.eventposition.current)));
  }
}