[JS] 드래그 앤 드롭(Drag and Drop) 기능 이해하기

컴퓨터를 사용할 때 빠질 수 없는 것이 마우스의 드래그이다.
자주 사용되는 만큼 굉장히 중요하다고 볼 수 있는데 이번 기회에 정리하고 기능들을 이해해 보려고 한다.

요소의 드래그 가능 여부

일단 시작하기에 앞서, 요소의 드래그를 가능하게 하려면?

드래그 가능 여부는 HTML의 태그에 속성을 추가하여 드래그를 방지하는 방법과 CSS의 요소에 속성을 추가하여 드래그를 방지하는 방법이 있다. HTML의 태그에는 draggable이라는 전역 특성이 있다. 이 특성은 요소의 드래그 가능 여부를 나타내는 열거형 특성으로, 네이티브 브라우저 동작 방식과 HTML Drag and Drop API 모두 통제합니다draggable은 true와 false 두 값 중 하나를 가질 수 있다.

CSS에서는 user-drag이라는 CSS 규칙을 사용하여 사용자가 마우스나 터치 입력을 사용하여 요소를 드래그하는 기능을 비활성화할 수 있다

🔸 html의 태그에서 draggable을 true로 설정하는 방법

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

🔹 css에서 user-drag를 설정하는 방법 (현재 safari와 chrome에서 사용가능)

// css
.div_item {
	user-drag : auto // 요소의 기본 드래그 동작을 사용함.
   }

다양한 드래그 앤 드롭 이벤트들

• dragstart: 요소가 드래그되기 시작할 때 발생한다.

  드래그가 시작되면 파란 동그라미가 하트로 바뀌게 하였다.
  
  

• dragend: 드래그 작업이 끝났을 때 발생한다.

  드래그가 끝나면 원래 상태인 동그라미로 돌아가게 하였다.
  
  

• drag: 요소가 드래그되는 동안 지속적으로 발생한다.

  드래그가 발생되는 동안 요소안에 있는 숫자가 랜덤한 숫자로 바뀌게 하였다.
  
  

• dragenter: 드래그된 요소가 droppable 요소 위로 들어갈 때 발생한다.

  droppable 요소는 드래그의 도착지라고 생각하면 된다. 드래그 요소가 드래그 된 후 도착지에 도착했을 때 발생하는 이벤트이다.
  
  파랑 동그라미 요소를 드래그하여 도착지에 도착시키면 도착!!이라는 메세지로 바뀌게 만들었다.
  
  

• dragleave: 드래그된 요소가 droppable 요소에서 벗어날 때 발생한다.

  도착지에 도착하면 "도착!!" 으로 바뀌고 다시 요소를 벗어나면 "도착지"로 바뀐다
  
  

• dragover: 드래그된 요소가 droppable 요소 위에 있는 동안 지속적으로 발생한다.

  파랑 동그라미를 드래그하여 도착지에 올려놓고 있으면 1~10까지의 랜덤한 숫자로 바뀌게 하였다
  
  

• drop: 드래그된 요소가 droppable 요소에 놓일 때 발생한다.

  자기 자신에게 drop했을 때 "드롭됨!"라는 문자로 바뀐다.
  
  

더 나아가

찾아보니 드래그 앤 드롭의 종류와 활용은 굉장히 무궁무진했다.
다음 번에는 이미지 드래그 앤 드롭, 드래그 앤 드롭으로 요소들의 위치바꾸기, 파일들의 드래그 앤 드롭 등에 관하여 이해해보고 정리하는 글을 써 보겠다.