먼저, Hammer.js를 프로젝트에 추가해야 합니다. npm을 사용하는 경우 다음 명령어를 실행하여 Hammer.js를 설치할 수 있습니다.

npm install hammerjs

HTML 파일에 다음과 같이 Hammer.js 스크립트 파일을 추가합니다.

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

드래그 앤 드롭을 구현할 요소에 대해 이벤트 리스너를 등록해야 합니다. 이 예제에서는 element라는 ID를 가진 요소를 대상으로 드래그 앤 드롭 이벤트를 구현합니다.

// element 요소를 선택합니다.
const element = document.getElementById('element');

// Hammer.js 인스턴스를 생성합니다.
const hammer = new Hammer(element);

// 드래그 시작시 호출될 함수를 등록합니다.
hammer.on('panstart', function(event) {
    // 드래그 시작 시 필요한 작업을 수행합니다.
});

// 드래그 중 호출될 함수를 등록합니다.
hammer.on('pan', function(event) {
    // 드래그 중 필요한 작업을 수행합니다.
});

// 드래그 종료시 호출될 함수를 등록합니다.
hammer.on('panend', function(event) {
    // 드래그 종료 시 필요한 작업을 수행합니다.
});

위의 예제에서 panstart, pan, panend 이벤트를 사용하여 드래그 앤 드롭 작업을 구현할 수 있습니다. 각 이벤트는 해당 이벤트가 발생할 때마다 등록한 함수가 호출됩니다.

드래그 시작시 호출되는 함수에서는 드래그 작업을 시작하기 전에 필요한 초기화 작업을 수행합니다. 드래그 중 호출되는 함수에서는 드래그 중인 요소를 이동시키는 등의 작업을 수행합니다. 드래그 종료시 호출되는 함수에서는 드래그 작업이 완료된 후에 필요한 작업을 수행합니다.

위의 예제는 Hammer.js를 사용하여 기본적인 드래그 앤 드롭 기능을 구현하는 방법을 보여줍니다. 필요에 따라 Hammer.js의 다른 제스처 이벤트를 사용하여 더 복잡한 드래그 앤 드롭 동작을 구현할 수도 있습니다. Hammer.js의 공식 문서를 참조하여 더 많은 기능을 알아볼 수 있습니다.