[JS] 마우스 Drog & Drop을 이용하여 박스를 이동시켜보자.

최근에 마우스 드래그 앤 드롭을 이용하여 박스를 이동시키는 기능을 구현한 적이 있었다. 금방 구현할 줄만 알았는데, 많은 시간이 걸렸다. 어려웠던 경험을 정리하고 내 것으로 확실히 만들기 위해 다시 한 번 이 기능을 만들어보았다. 따라서 이번 포스팅에서는 마우스 이벤트를 이용하여 드래그 앤 드롭(Drag & Drop)을 이용한 박스 이동 기능을 어떻게 구현했는지에 관하여 써보고자한다. 백문이불여일견(白聞不如一見)이라 했다. 구현 영상은 아래와 같다. 완성본 위 기능을 구현하기 위해서는 다음과 같은 마우스 이벤트가 필요하다. mousedown: 마우스 버튼이 눌릴 때 발생하는 이벤트. mouseup: 마우스 버튼이 떼어질 때 발생하는 이벤트. mousemove: 마우스 포인터가 이동할 때 발생하는 이벤트...

2021.01.04