먼저, Hammer.js를 다운로드하거나 CDN 링크를 추가합니다.

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

이제 드래그 앤 드롭 대상 요소를 준비합니다. 이 예제에서는 div 요소를 드래그할 수 있는 대상으로 사용합니다.

<div id="dragElement">Drag me!</div>

다음으로, Hammer.js를 사용하여 터치 이벤트를 처리합니다. 아래 코드에서는 press, pan, panstart, panend 이벤트를 사용합니다.

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

hammer.on('press', function(event) {
  // Drag start logic
});

hammer.on('pan', function(event) {
  // Dragging logic
  dragElement.style.transform = 'translate(' + event.deltaX + 'px, ' + event.deltaY + 'px)';
});

hammer.on('panstart', function(event) {
  // Dragging start logic
});

hammer.on('panend', function(event) {
  // Drag end logic
});

위의 코드에서 pan 이벤트 핸들러에서 event.deltaX와 event.deltaY 값을 사용하여 드래그 중인 요소를 이동시킵니다.

드래그를 시작할 때나 종료할 때 추가적인 로직을 수행하려면 pressstart, panstart, panend 등의 이벤트 핸들러를 사용할 수 있습니다.

이제 웹 페이지를 불러와서 터치 이벤트가 제대로 동작하는지 확인해보세요. dragElement를 터치하고 드래그하면 해당 요소가 움직일 것입니다.

이와 같은 방법으로 Hammer.js를 사용하여 터치 이벤트를 드래그 앤 드롭 대상 요소에 적용할 수 있습니다. Hammer.js에는 좀 더 많은 기능이 있으니 공식 문서를 참조하시기 바랍니다.