[javascript] Hammer.js를 사용하여 드래그 및 스와이프 동작에 따라 화면 전환 방향을 결정하는 방법은?

27 Nov 2023

javascript

Hammer.js 설치: Hammer.js를 사용하기 위해 먼저 해당 라이브러리를 다운로드하고 HTML 파일에 추가해야 합니다. 다음과 같이 <script> 태그를 사용하여 Hammer.js를 로드하세요.

<script src="path/to/hammer.js"></script>

HTML 마크업: 화면 전환을 적용할 요소에 id 속성을 추가해주세요. 아래 예시에서는 swipe-container라는 ID를 가진 요소를 사용하겠습니다.

<div id="swipe-container">
  <!-- 화면 내용 -->
</div>

JavaScript 코드: Hammer.js를 사용하여 화면 전환 방향을 결정하기 위해 다음과 같이 JavaScript 코드를 작성합니다.

var swipeContainer = document.getElementById("swipe-container");

var hammer = new Hammer(swipeContainer);

hammer.get('swipe').set({ direction: Hammer.DIRECTION_ALL });

hammer.on("swipeleft swiperight swipedown swipeup", function(event) {
  if (event.type === "swipeleft") {
    // 왼쪽으로 스와이프됨
    // 화면을 오른쪽으로 전환
  } else if (event.type === "swiperight") {
    // 오른쪽으로 스와이프됨
    // 화면을 왼쪽으로 전환
  } else if (event.type === "swipedown") {
    // 아래로 스와이프됨
    // 화면을 위쪽으로 전환
  } else if (event.type === "swipeup") {
    // 위로 스와이프됨
    // 화면을 아래쪽으로 전환
  }
});

위의 코드에서 swipeleft, swiperight, swipedown, swipeup 이벤트를 감지하여 각각 화면을 적절한 방향으로 전환할 수 있습니다.

이제 Hammer.js를 사용하여 드래그 및 스와이프 동작에 따라 화면 전환 방향을 결정하는 방법에 대해 알게 되었습니다. 이를 활용하여 간단한 화면 전환 기능을 구현할 수 있습니다.