[javascript] Hammer.js를 사용하여 드래그 및 스와이프 이벤트의 동작 방향을 설정하는 방법은?

27 Nov 2023

javascript

Hammer.js를 설치하려면 먼저 HTML 파일의 <head> 태그 내에서 다음과 같이 스크립트를 추가해야 합니다:

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>

설치가 완료되면, Hammer.js를 사용할 요소를 지정하고 해당 요소에 제스처 이벤트를 바인딩할 수 있습니다. 아래는 예시 코드입니다:

<div id="myElement">드래그 또는 스와이프할 요소</div>

<script>
  // Hammer.js 인스턴스 생성
  var hammertime = new Hammer(document.getElementById('myElement'));

  // 드래그 이벤트 바인딩
  hammertime.on('pan', function(event) {
    console.log('드래그 이벤트 발생');
    console.log('이동 좌표: ', event.deltaX, event.deltaY);
  });

  // 스와이프 이벤트 바인딩
  hammertime.on('swipe', function(event) {
    console.log('스와이프 이벤트 발생');
    console.log('스와이프 방향: ', event.direction);
  });
</script>

위의 예시에서는 <div id="myElement"> 요소에 대해 드래그 및 스와이프 이벤트를 바인딩하고 있습니다. 드래그 이벤트 발생 시 pan 이벤트를, 스와이프 이벤트 발생 시 swipe 이벤트를 사용합니다. 각 이벤트 핸들러에서 원하는 동작을 구현할 수 있습니다.

또한, Hammer.js를 사용하여 드래그 및 스와이프 이벤트의 동작 방향을 설정할 수도 있습니다. 예를 들어, 아래 코드를 사용하여 드래그 및 스와이프 이벤트가 수평 방향으로만 동작하도록 설정할 수 있습니다:

hammertime.get('pan').set({ direction: Hammer.DIRECTION_HORIZONTAL });
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_HORIZONTAL });

위의 코드에서는 direction 속성을 사용하여 동작 방향을 설정하고 있습니다. Hammer.DIRECTION_HORIZONTAL 값을 사용하면 수평 방향으로만 이벤트가 동작하게 됩니다.

Hammer.js를 사용하여 드래그 및 스와이프 이벤트의 동작 방향을 설정하는 방법에 대해 알아보았습니다. 추가적인 정보는 Hammer.js 공식 문서를 참고하시기 바랍니다.