1. Hammer.js 라이브러리를 프로젝트에 추가합니다. HTML 파일에 다음 코드를 추가하거나, npm을 통해 설치할 수도 있습니다.

<script src="https://hammerjs.github.io/dist/hammer.min.js"></script>

1. 드롭다운 메뉴 요소를 선택하고 Hammer.js를 초기화합니다. 아래 예제에서는 dropdown 클래스를 가진 요소를 선택합니다.

const dropdown = document.querySelector('.dropdown');
const hammer = new Hammer(dropdown);

1. 터치 동작에 대한 핸들러를 추가하고, 이벤트 발생 시 화면 위치를 변경합니다. 여기서는 panstart, panmove, panend 이벤트를 사용합니다.

hammer.on('panstart', function(event) {
  // 이벤트 시작 시에 필요한 작업을 수행합니다.
  // 예: 드롭다운 메뉴의 초기 위치를 기억합니다.
});

hammer.on('panmove', function(event) {
  // 터치 이동에 따라 화면 위치를 조정합니다.
  // 예: 드롭다운 메뉴의 위치를 변경합니다.
});

hammer.on('panend', function(event) {
  // 이벤트 종료 시에 필요한 작업을 수행합니다.
  // 예: 드롭다운 메뉴의 최종 위치를 적용합니다.
});

1. panstart, panmove, panend 이벤트에서 필요한 작업을 수행합니다. 이를 통해 드롭다운 메뉴의 화면 위치를 원하는 대로 상대적으로 제어할 수 있습니다.

위의 코드는 Hammer.js를 사용하여 드롭다운 메뉴의 화면 위치를 상대적으로 제어하는 간단한 예제입니다. 이를 기반으로 원하는 방식으로 화면 위치를 제어할 수 있습니다.

더 자세한 내용은 Hammer.js 공식 문서를 참조해 주세요.