[javascript] Hammer.js를 사용하여 드래그 및 스와이프 기능을 구현하는 방법은?

27 Nov 2023

javascript

다음은 Hammer.js를 사용하여 드래그 및 스와이프 기능을 구현하는 간단한 예제입니다.

Hammer.js 라이브러리를 다운로드하고 HTML 파일에 포함합니다.
```
<script src="path/to/hammer.min.js"></script>
```
드래그 및 스와이프 기능을 추가하려는 HTML 요소에 id를 지정합니다. ```html

내용

3. JavaScript 코드에서 Hammer.js를 사용하여 드래그 및 스와이프 기능을 구현합니다.
```javascript
var element = document.getElementById('myElement');
var hammer = new Hammer(element);

// 드래그 이벤트 핸들러
hammer.on('pan', function(event) {
  // 드래그 중인 좌표를 가져옴
  var x = event.deltaX;
  var y = event.deltaY;

  // 드래그 중인 좌표에 따라 요소 이동 또는 변화를 적용
  element.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
});

// 스와이프 이벤트 핸들러
hammer.on('swipe', function(event) {
  // 스와이프 방향을 가져옴
  var direction = event.direction;

  // 스와이프 방향에 따라 특정 동작을 수행
  if (direction == Hammer.DIRECTION_LEFT) {
    // 왼쪽으로 스와이프했을 때의 동작
  } else if (direction == Hammer.DIRECTION_RIGHT) {
    // 오른쪽으로 스와이프했을 때의 동작
  }
});

위의 코드는 myElement라는 ID를 가진 HTML 요소를 드래그하거나 스와이프할 때의 동작을 구현한 것입니다. 여기서는 pan 이벤트를 사용하여 드래그 동작을 처리하고, swipe 이벤트를 사용하여 스와이프 동작을 처리하였습니다.

Hammer.js를 사용하면 제스처 기능을 쉽게 구현할 수 있으며, 더 많은 제스처 기능을 사용하고 싶다면 Hammer.js의 공식 문서를 참고하시기 바랍니다.