[JavaScript] 드래그 이벤트를 이용하여 특정 태그의 텍스트와 색상 변경

먼저 div 상자 3개를 만든 후, CSS를 이용하여 맨 아래 이미지처럼 만들었다.

 

 

 

모든 div태그를 불러온 뒤, divs에 저장한다. getElementByTagName으로 불러왔기에, divs는 모든 div들이 저장되어있는 배열이다. 배열 divs를 foreach로 하나씩 불러오게하여, draggable = true;를 이용하여 모든 div 태그가 드래그가 가능하도록 한다.

 

그리고 dragstart를 이용하여 처음 스크롤을 누를 시, div의 텍스트와 배경색을 저장하도록 만든다. dataTransfer.setData를 이용하면 보다 쉽게 div의 데이터 정보들을 저장할 수 있다.

 

dragover 이벤트를 이용해서, e.preventDefault();로 기본동작을 취소해야 한다.  취소하지 않으면 아래의 drop 이벤트가 취소되기 때문이다.

 

drop 이벤트는 드랍할 대상 요소에 적용을 한다. 드랍할 대상 요소 역시 같은 div들 중 하나이므로, div에 적용을 한다. 대상 타겟의 textContent에 getData로 저장되었던 텍스트를 집어넣고, 해당 div의 backgroundColor에 저장되었던 색깔 데이터를 집어넣는다.

 

 

 

파란색 text3 상자를 빨간색 text1 상자에 드래그한 모습이다. 빨간색 text1 상자가  text3 상자처럼 변했다.

 

 

 

 

드래그 이벤트 종류

드래그하는 대상에 적용

dragstart : 드래그를 시작할 때 발생

drag : 드래그를 하는 동안 발생

dragend : 드래그가 끝났을 때 발생

 

드랍할 대상 요소에 적용

dragenter: 마우스 포인터가 드롭 요소의 경계선 안쪽으로 들어갈 때 발생

dragover: 마우스 포인터가 드롭 요소의 경계선 안쪽에 있을 때 발생

dragleave: 마우스 포인터가 드롭 요소의 경계선 바깥으로 나왔을 때 발생

drop: 요소에 드롭할 때 발생