[javascript] 드래그 가능한 요소의 이동 제한과 경계 설정 방법

29 Nov 2023

javascript

드래그 기능을 가진 웹 요소를 만들 때, 종종 움직임을 제한하거나 경계를 설정해야 할 때가 있습니다. 이를 통해 사용자가 원하는 위치로 드래그 되지 않도록 제어할 수 있습니다. 드래그 가능한 요소의 이동 제한과 경계 설정 방법에 대해 살펴보겠습니다.

이동 제한 방법

드래그 가능한 요소를 특정 영역 내에서만 이동할 수 있도록 제한하기 위해, 조건문을 사용하여 좌표를 제어할 수 있습니다. 예를 들어, 움직인 요소의 좌표가 특정 범위를 벗어날 경우, 이동을 제한하는 코드를 작성할 수 있습니다. 다음은 JavaScript로 이동 제한을 구현하는 예시입니다.

// 드래그 가능한 요소
var draggableElement = document.getElementById('draggable');

draggableElement.addEventListener('mousedown', function(event) {
   var startX = event.clientX;
   var startY = event.clientY;
   
   document.addEventListener('mousemove', moveElement);
   document.addEventListener('mouseup', stopDrag);
   
   function moveElement(event) {
      var moveX = event.clientX - startX;
      var moveY = event.clientY - startY;
      
      // 이동 제한할 영역의 좌표 설정
      var minX = 0;
      var maxX = 500;
      var minY = 0;
      var maxY = 300;
      
      // 요소의 실제 위치 계산
      var left = draggableElement.offsetLeft + moveX;
      var top = draggableElement.offsetTop + moveY;
      
      // 이동 제한 조건 확인
      if (left > minX && left < maxX) {
         draggableElement.style.left = left + 'px';
      }
      
      if (top > minY && top < maxY) {
         draggableElement.style.top = top + 'px';
      }
   }
   
   function stopDrag() {
      document.removeEventListener('mousemove', moveElement);
      document.removeEventListener('mouseup', stopDrag);
   }
});

위 코드에서는 mousedown 이벤트가 발생했을 때 요소의 시작 좌표를 저장하고, mousemove 이벤트가 발생할 때마다 요소를 이동시킵니다. 이동할 때마다 이동 제한 조건을 확인하여 좌표를 제어합니다.

경계 설정 방법

드래그 가능한 요소를 특정 경계 내에서만 이동하도록 설정하려면, 이동 제한과 유사한 방법을 사용할 수 있습니다. 다만, 경계를 벗어날 경우 요소를 경계 내에 고정시키는 추가적인 처리가 필요합니다. 다음은 이동 경계를 설정하는 예시입니다.

// 드래그 가능한 요소
var draggableElement = document.getElementById('draggable');

draggableElement.addEventListener('mousedown', function(event) {
   var startX = event.clientX;
   var startY = event.clientY;
   
   document.addEventListener('mousemove', moveElement);
   document.addEventListener('mouseup', stopDrag);
   
   function moveElement(event) {
      var moveX = event.clientX - startX;
      var moveY = event.clientY - startY;
      
      // 경계 설정할 요소와 경계 요소의 위치 계산
      var boundaryElement = document.getElementById('boundary');
      var boundaryRect = boundaryElement.getBoundingClientRect();
      
      // 이동 제한할 경계 설정
      var minX = boundaryRect.left;
      var maxX = boundaryRect.right - draggableElement.offsetWidth;
      var minY = boundaryRect.top;
      var maxY = boundaryRect.bottom - draggableElement.offsetHeight;
      
      // 요소의 실제 위치 계산
      var left = draggableElement.offsetLeft + moveX;
      var top = draggableElement.offsetTop + moveY;
      
      // 경계 이탈 시 위치 조정
      if (left < minX) {
         left = minX;
      } else if (left > maxX) {
         left = maxX;
      }
      
      if (top < minY) {
         top = minY;
      } else if (top > maxY) {
         top = maxY;
      }
      
      draggableElement.style.left = left + 'px';
      draggableElement.style.top = top + 'px';
   }
   
   function stopDrag() {
      document.removeEventListener('mousemove', moveElement);
      document.removeEventListener('mouseup', stopDrag);
   }
});

위 코드에서는 이동 제한과 마찬가지로 요소의 시작 좌표를 기록하고, 이동할 때마다 이동 제한 조건을 확인하여 좌표를 제어합니다. 추가로 경계를 벗어날 경우 요소를 경계 내로 조정하는 처리를 수행합니다.

드래그 가능한 요소의 이동 제한과 경계 설정에 대한 방법을 알아보았습니다. 웹 애플리케이션에서 드래그 기능을 구현할 때 이러한 제한과 설정을 활용하여 사용자 경험을 향상시킬 수 있습니다.

이동 제한 방법

경계 설정 방법

참고 자료