드래그했을 때 mouseup 이벤트가 작동하지 않는 이유

요소를 잡아 끌고 놓았을 때는 해당 요소의 mouseup 이벤트가 발생하지 않기 때문이다.
즉, 잡아 끌 해당 요소에 mouseup 이벤트를 걸었기 때문이다.

해결 방법

mouseup 이벤트를 doucment에 걸어주는 것으로 해결할 수 있다.

잡아 끌 해당 요소에 mouseup 이벤트를 걸면 안되는 이유

마우스 왼쪽 클릭 시

1. mousedown
2. mouseup
3. click 이벤트 순으로 발생한다.

마우스 오른쪽 클릭 시

1. mousedown
2. mouseup
3. contextmenu 이벤트 순으로 발생한다.

위와 같이 요소 위에서 클릭이 이루어지는 경우엔 마우스 포인터가 움직이지 않으므로 mouseup이벤트를 해당 요소에 걸어도 문제가 없다.

하지만 마우스 포인터가 요소를 벗어난 상태에서는 해당 요소에 mouseup 이벤트가 발생할 수 없다. mouseup이벤트는 그 순간 마우스 포인터가 있는 곳에서 발생하기 때문.

마우스 왼쪽 클릭 후 잡아 끄는데 해당 요소가 draggable false면

1. mousedown
   만 일어난다.
   이미 마우스 포인터가 요소를 벗어난 상태이므로 mouseup과 click은 발생하지 못한다.

마우스 왼쪽 클릭 후 잡아 끄는데 해당 요소가 draggable true면

1. mousedown
2. dragend 이벤트 순으로 발생한다.
   이미 마우스 포인터가 요소를 벗어난 상태이므로 mouseup과 click은 발생하지 못한다.