[javascript] 드래그 가능한 요소의 속성 및 제어 방법

29 Nov 2023

javascript

드래그 가능한 요소는 사용자가 마우스를 사용하여 요소를 이동시킬 수 있는 인터랙티브한 기능을 제공합니다. 이 기능을 구현하기 위해서는 다음과 같은 속성과 제어 방법을 알아야 합니다.

속성

draggable

draggable 속성은 HTML 요소가 드래그 가능한지 여부를 지정합니다. 이 속성은 불리언(Boolean) 값을 가지며, 기본값은 false입니다. 드래그 가능한 요소로 만들기 위해서는 draggable 속성을 true로 설정해야 합니다.

<div draggable="true">드래그 가능한 요소</div>

dataTransfer

dataTransfer 객체는 드래그 앤 드롭 동작 중에 데이터를 전달하는 데 사용됩니다. 이 객체는 드래그 이벤트 핸들러에서 접근할 수 있으며, 데이터를 저장하고 드롭 대상으로 전달하는 데 사용됩니다.

element.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('text/plain', '이동할 데이터');
});

제어 방법

dragstart 이벤트

dragstart 이벤트는 드래그 시작 시 발생하는 이벤트입니다. 이벤트 핸들러에서는 dataTransfer 객체의 setData() 메서드를 사용하여 드래그 데이터를 설정할 수 있습니다.

element.addEventListener('dragstart', function(event) {
  // 드래그 데이터 설정
  event.dataTransfer.setData('text/plain', '이동할 데이터');
});

dragover 이벤트

dragover 이벤트는 드래그 중 요소 위로 이동할 때 발생하는 이벤트입니다. 이벤트 핸들러에서는 드롭이 허용되는지 여부를 결정하기 위해 preventDefault() 메서드를 호출해야 합니다.

element.addEventListener('dragover', function(event) {
  event.preventDefault(); // 드롭 허용
});

drop 이벤트

drop 이벤트는 드롭 대상 위에 요소를 드래그하여 드롭했을 때 발생하는 이벤트입니다. 이벤트 핸들러에서는 드롭된 데이터를 읽고 처리할 수 있습니다.

element.addEventListener('drop', function(event) {
  event.preventDefault(); // 드롭 기본 동작 방지
  
  // 드롭된 데이터 읽기
  var data = event.dataTransfer.getData('text/plain');
  
  // 데이터 처리
  console.log('드롭된 데이터:', data);
});

예제

다음은 드래그 가능한 요소를 구현하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
  <title>드래그 가능한 요소</title>
  <style>
    .draggable {
      width: 200px;
      height: 200px;
      background-color: yellow;
      text-align: center;
      line-height: 200px;
      cursor: move;
    }
  </style>
</head>
<body>
  <div class="draggable" draggable="true">드래그 가능한 요소</div>
  <script>
    var draggableElement = document.querySelector('.draggable');
    
    draggableElement.addEventListener('dragstart', function(event) {
      event.dataTransfer.setData('text/plain', '이동할 데이터');
    });
    
    draggableElement.addEventListener('dragover', function(event) {
      event.preventDefault();
    });
    
    draggableElement.addEventListener('drop', function(event) {
      event.preventDefault();
      
      var data = event.dataTransfer.getData('text/plain');
      
      console.log('드롭된 데이터:', data);
    });
  </script>
</body>
</html>

이 예제를 실행하면 드래그 가능한 요소를 마우스로 이동할 수 있으며, 드롭 시 console.log를 통해 드롭된 데이터를 확인할 수 있습니다.

속성