① mousedown 이벤트가 발생할 때 시작점 좌표를 startCoord 변수에 [x좌표, y좌표] 형태로 저장합니다.

② mouseup 이벤트가 발생할 때 끝점 좌표를 endCoord 변수에 [x좌표, y좌표] 형태로 저장합니다.

③ startCoord와 endCoord로 좌표 차이를 구합니다. x 좌표가 바뀐 양(endCoord[0] - startCoord[0])은 diffX 변수에, y 좌표가 바뀐 양(endCoord[1] - startCoord[1])은 diffY 변수에 저장합니다.

④ 마우스가 움직인 각도는 isUnder45 변수에 저장합니다. 왼쪽과 오른쪽 영역은 움직인 각도가 ±45도보다 작은 경우로 diffX 변수의 절댓값이 diffY 변수의 절댓값보다 작습니다(실제로 그런지 임의의 시작점과 끝점을 넣어 계산해 보세요). 절댓값은 Math.abs() 메서드로 구합니다. Math.abs()는 인수로 넣은 수의 절댓값을 반환하는 메서드로, -5를 넣으면 5가 나옵니다.

⑤ 왼쪽 영역은 diffX 변수의 절댓값이 0보다 작고, 오른쪽 영역은 diffX 변수의 절댓값이 0보다 크므로 왼쪽과 오른쪽도 구분할 수 있습니다. diffY 변수의 절댓값이 diffX 변수의 절댓값보다 크거나 같으면(!isUnder45) 위쪽과 아래쪽이 됩니다. 위쪽은 diffY가 0보다 작고, 아래쪽은 diffY 변수가 0보다 크므로 위쪽과 아래쪽도 구분할 수 있습니다.