좌우로 나뉜 DIV 화면을 마우스로 드래그 하여 크기 조절

Question

안녕하세요. 밑에 사진처럼 DIV 두개로 나누어져 있는데 두 DIV 가로길이의 합은 일정하게가운데 선을 마우스로 드래그하여 가로 길이를 조절하고 싶습니다.그런데 좌우로 움직이지 않습니다ㅠㅠ 왜그럴까요ㅠㅠ var startpos, diffpos=0, range=50; var isEnable = false; function on_mouse_down(e) { startpos = event.clientX + diffpos; isEnable = true; return false; } function on_mouse_up(e) { isEnable = false; return false; } function on_mouse_move(e) { if (isEnable) { pos = event.clientX; diffpos = startpos-pos; var width = window.innerWidth/2; if (diffpos > -(width-range) && diffpos < (width-range)) { document.getElementById("d1").style.width = width - diffpos + "px"; document.getElementById("d2").style.width = width - 20 + diffpos + "px"; } } }

LEFT

RIGHT

포기해.. · Accepted Answer

이벤트를 객채한테 안줬으니까 아무일도 안일어나죠

aaaaaaaaaaaa · Answer

앗 누락이되었네요! init() 에 document.getElementById(&#34;hr&#34;).onmousedown &#61; on_mouse_down;document.onmouseup &#61; on_mouse_up;document.onmousemove &#61; on_mouse_move;이렇게 넣었습니다!ㅜㅜ

포기해.. · Answer

hr 없애고 마우스 다운 이벤트를 document에 바로 주세요

aaaaaaaaaaaa · Answer

document.onmousedown &#61; on_mouse_down; document.onmouseup &#61; on_mouse_up;document.onmousemove &#61; on_mouse_move; 이렇게 했는데 안되네요ㅜㅜ

yeori · Answer

두가지 문제가 있습니다.1. drag target 영역 문제지금 mousedown, mouseup, mousemove 이벤트를 '#hr'에 걸어주셨는데, hr의 너비가 0.3%로 매우 좁기때문에 마우스를 꾹 눌러서 확!! 움직이면 마우스가 #hr의 영역을 벗어나서 더이상 드래그 기능이 작동하지 않습니다.마우스로 꾹 누르고 아주아주 살금살금 움직여서 #hr 범위 안에 있게 하면 일단 작동은 하겠지만 사용성은 꽝이겠죠.드래그 타겟이 충분히 넓다면 별 문제 안되지만 위처럼 가느다란 선(과 비슷한것)을 드래그해야할때는 window자체에 이벤트를 걸어줍니다.const mousedown &#61; (e) &#61;> {...} const mousemove &#61; (e) &#61;> { ... } const mouseup &#61; (e) &#61;> { ... } window.addEventListener('mousedown', mousedown) window.addEventListener('mousemove', mousemove) window.addEventListener('mouseup', mouseup)위와같이 하면 사용성 문제는 개선이 됩니다.그런데 위와같이 window에 드래그를 걸어주면 시도때도 없이 드래그 기능이 호출됩니다.(아무데나 클릭하고 드래그해도 계속 이벤트 발생)그래서 아래와 같이 mousedown에서 드래그 기능을 activation 시킬 조건을 걸어줍니다.function on_mouse_down(e) { const el &#61; e.target // 마우스 눌린 elem if (el.classList.contains('#hr')) { .... isEnable &#61; true; } }* 마우스가 눌린 대상이 #hr인 경우에만 드래그 기능을 시작함2. 상대 위치 지정위와같이 드래그로 영역을 조절하는 경우 마우스를 꾹 눌렸을때 좌우 div의 너비값을 미리 받아놔야 합니다.const width &#61; { left: null, right: null } function on_mouse_down(e) { const el &#61; e.target // 마우스 눌린 elem if (el.classList.contains('#hr')) { .... startpos &#61; e.clientX width.left &#61; $('#left').width width.right &#61; $('#right').width isEnable &#61; true; } }startpos 가 마우스를 눌렀을때의 시작 위치 값인듯 합니다.그리고나서 mousemove에서는 startpos로부터의 상대값을 아래와 같이 저장하고 있네요function on_mouse_move(e) { if (isEnable) { pos &#61; event.clientX; diffpos &#61; pos - startpos; // 드래그한 상대값 ... } }여기서 마우스를 꾹 눌렀을때 미리 받아놓은 너비값에 diffpos값을 양쪽에 반영합니다.function on_mouse_move(e) { if (isEnable) { pos &#61; event.clientX; diffpos &#61; pos - startpos; // 드래그한 상대값 document.getElem..('d1').style.width &#61; &#96;${width.left &#43; diffpos}px&#96; document.getElem..('d1').style.width &#61; &#96;${width.right - diffpos}px&#96; } }* diffpos 값을 왼쪽에는 더해주고 오른쪽에는 빼줌* diffpost가 양수이면 왼쪽이 더 늘어나고 음수이면 오른족이 더 늘어남

aaaaaaaaaaaa · Answer

모두 감사합니다ㅠㅠ 덕분에 해결했습니다!! 정말감사합니다~~~

좌우로 나뉜 DIV 화면을 마우스로 드래그 하여 크기 조절

6개의 답변

#div 목록