[javascript] Hammer.js를 사용하여 드래그 앤 드롭 기능의 제약 조건을 설정하는 방법은?

27 Nov 2023

javascript

먼저, Hammer.js를 HTML 문서에 추가합니다. 다음으로, 드래그 앤 드롭할 요소를 선택하고 Hammer 인스턴스를 생성합니다. 이후에는 Hammer 인스턴스에서 pan 제스처를 감지하고 제한할 수 있는 여러 옵션을 설정할 수 있습니다.

아래는 Hammer.js를 사용하여 드래그 앤 드롭 기능의 제약 조건을 설정하는 예제 코드입니다.

<!DOCTYPE html>
<html>
<head>
  <title>드래그 앤 드롭 제약 조건</title>
  <script src="https://cdn.jsdelivr.net/hammerjs/2.0.8/hammer.min.js"></script>
  <style>
    #drag-element {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div id="drag-element"></div>

  <script>
    var dragElement = document.getElementById('drag-element');
    var hammertime = new Hammer(dragElement, {
      touchAction: 'none', // 터치 액션을 비활성화하여 스크롤을 방지합니다.
      direction: Hammer.DIRECTION_ALL, // 모든 방향으로 드래그를 허용합니다.
      threshold: 0, // 이동 거리에 대한 최소 값으로 감도를 조절할 수 있습니다.
      pan: {
        direction: Hammer.DIRECTION_ALL, // 모든 방향으로 이동을 허용합니다.
        threshold: 0, // 이동 거리에 대한 최소 값으로 감도를 조절할 수 있습니다.
        pointers: 1, // 단일 포인터만 허용합니다.
        enable: true, // 팬 제스처를 활성화합니다.
        threshold: 80, // 이동 거리에 대한 최소 값으로 요소가 움직이기 전에 반응을 보이지 않습니다.
      }
    });

    hammertime.on('pan', function(event) {
      // 드래그 이벤트 처리
      var deltaX = event.deltaX;
      var deltaY = event.deltaY;
      // 추가적인 제약 조건을 설정하거나 원하는 동작을 수행할 수 있습니다.
    });
  </script>
</body>
</html>

위의 예제 코드는 #drag-element라는 id를 가진 요소를 생성하고 드래그할 수 있도록 설정한 후, 움직이는 거리에 대한 제약 조건을 설정합니다. pan 이벤트 핸들러에서는 드래그 이벤트를 처리하고 추가적인 제약 조건을 설정하거나 원하는 동작을 수행할 수 있습니다.

이렇게 Hammer.js를 사용하여 드래그 앤 드롭 기능의 제약 조건을 설정할 수 있습니다. Hammer.js에 대한 자세한 내용은 공식 문서를 참조하시기 바랍니다.