[javascript] 창(div) 분할 사이즈 조절

좌측 사이드 네비게이션이 있을 때 창 조절이 가능한 사이트들이 있는데 구현할 일이 있어서 구현해본다.

 

사실 resize 기능이 있지만 조절창이 우측 하단에 있어 웹에서 사용하긴 좀 어려워 보인다.

 

어쨋든 원리는 아래와 같다.

1. 마우스를 클릭한 순간 마우스의 위치값을 기억한다.

2. 마우스를 움직이면 1번에서의 위치값에 대한 상대좌표를 저장한다.

3. 마우스를 떼는 순간 이동한 값에 따라 창분할을 한다. (아래 코드는 %기준)

 

is_mouse_down과 is_mouse_move는 마우스를 올리는 순간(엄청 빠르게) 다시 클릭하면 계속 사이즈가 바뀌는 것을 대비해서 작성을 했는데 빈도만 줄었을 뿐 진짜 아주 가끔 같은 현상이 일어난다...

 

창의 너비를 줄이면 발생은 사실상 불가능하지 않을까

 

---

 

See the Pen Untitled by parksy1775 (@parksy1775) on CodePen.