[javascript] Hammer.js를 사용하여 드래그 앤 드롭 기능에 애니메이션 효과를 추가하는 방법은?

27 Nov 2023

javascript

먼저 Hammer.js를 프로젝트에 추가합니다. CDN을 사용하거나, npm을 통해 설치할 수 있습니다.

<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/hammer.min.js"></script>

다음으로 드래그 앤 드롭을 적용할 요소를 선택합니다. 예를 들어, div 요소에 드래그 앤 드롭을 적용해보겠습니다.

<div id="dragElement">드래그 앤 드롭할 요소</div>

그리고 자바스크립트 코드에서 Hammer.js를 사용하여 애니메이션 효과를 추가합니다.

var dragElement = document.getElementById('dragElement');
var hammer = new Hammer(dragElement);

hammer.on('panstart', function() {
  // 드래그 시작 시에 호출되는 함수
  dragElement.style.transition = 'none'; // 애니메이션 효과를 제거합니다.
});

hammer.on('pan', function(event) {
  // 드래그 중일 때 호출되는 함수
  var deltaX = event.deltaX;
  var deltaY = event.deltaY;

  // 드래그한 거리만큼 요소를 이동시킵니다.
  dragElement.style.transform = 'translate(' + deltaX + 'px, ' + deltaY + 'px)';
});

hammer.on('panend', function(event) {
  // 드래그 종료 시에 호출되는 함수
  dragElement.style.transition = 'transform 0.3s ease'; // 애니메이션 효과를 추가합니다.
  dragElement.style.transform = 'translate(0, 0)'; // 요소를 원래 위치로 되돌립니다.
});

위의 코드에서는 panstart 이벤트에서 애니메이션 효과를 제거하고, pan 이벤트에서 요소를 드래그한 거리만큼 이동시키며, panend 이벤트에서 애니메이션 효과를 추가하고 요소를 원래 위치로 되돌립니다.

Hammer.js를 사용하여 드래그 앤 드롭 기능에 애니메이션 효과를 추가하는 방법을 알아보았습니다. Hammer.js의 다양한 이벤트와 옵션을 활용하면 더욱 다양한 효과를 구현할 수 있습니다. 자세한 내용은 Hammer.js 공식 문서를 참고하시기 바랍니다.