[JS] mouse event, drag drop algorithm

JavaScripts에서 마우스의 이벤트를 처리하는 함수

• click - 마우스를 클릭할 때 발생
• dbclick - 마우스를 더블 클릭할 때 발생
• mousedown - 마우스 버튼을 누를 때 발생
• mouseenter - 마우스 요소의 경계 외부에서 내부로 이동할 때 발생
• mouseleave - 마우스 요소의 경계 내부에서 외부로 이동할 때 발생
• mousemove - 마우스를 움직일 때 발생
• mouseout - 마우스가 요소를 벗어날 때 발생
• mouseover - 마우스를 요소안에 들어올 때 발생

 

Drag and Drop Algorithm

 일반적인 알고리즘과 box를 드래그 앤 드롭으로 움직이는 경우의 어떠한 기능을 해야 하는지 설명하도록 하겠습니다.

1. mousedown에서는 움직임이 필요한 요소를 준비합니다. 이때 기존 요소의 복사본을 만들거나, 해당 요소에 클래스를 추가하는 등 원하는 방식으로 작업할 수 있습니다.
   -> 현재 box와 cursor의 초기 위치를 구합니다. isDragging의 값을 True로 하여서 box가 움직일 수 있도록 합니다.
   
   
2. 이후 mousemove에서 position: absolute의 left, top을 변경합니다.
   -> 현재 커서 위치와 처음 위치의 차이를 구하고, 이 차이를 더하여서 최종 box의 위치를 결정한다.
   
   
3. mouseup에서는 드래그 앤 드롭의 완료와 관련된 작업을 합니다.
   -> isDragging의 값을 False로 하여서 box가 더이상 움직이지 않도록 합니다.

 

box를 드래그 앤 드롭으로 움직이게 하기 예시

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