[jQuery] draggable 스크롤바 버그 문제 해결 방법

jQuery ui에는 draggable라는 드래그 메소드가 있습니다. 아래와 같이 원하는 앨리먼트에 지정해주면 마우스 드래그로 이동이 가능하게 됩니다.

$("#myDiv").draggable();

하지만 draggable 기능에 문제가 하나 발결되었습니다. 예를 들어 myDiv라는 영역안에 iframe이나 overflow:scroll 속성이 있는 요소가 존재하는 경우 스크롤바가 생성될겁니다. 문제는 이 스크롤바를 클릭하면 draggable 이 적용된 부모 앨리먼트가 드래그 상태가 풀리지 않는 상태로 마우스를 계속 따라다니게 됩니다. 이를 해제하는 방법은 새로고침이나 오른쪽 클릭을 해야만 풀립니다;;

이 문제를 원천적으로 해결하는 방법은 앨리먼트 내 draggable이 동작하는 유효한 요소를 지정해주는 것입니다.

<div id="myDiv">
  <div class="dragWindowTitle">드래그창</div>
  <div class="dragWindowContent" style="overflow:scroll;">내용</div>
  <iframe class="iframeContent" src="url"></iframe>
</div>

위 처럼 구성이 되어있다고 가정했을때 가장 쉽게 생각하는 방법이 $(“#myDiv”).draggable(); 일겁니다. 하지만 이렇게되면 스크롤이 존재하는 div, iframe도 드래그 동작에 유효하여 문제가 발생합니다.

 

그렇다면 이렇게 처리합니다.

$("#myDiv").draggable({
  'handle' : '.dragWindowTitle'
});

$(“#myDiv”).draggable()에 handle 속성을 추가합니다. 이후로는 myDiv를 드래그할 수 있는 주체는 dragWindowTitle이라는 클래스를 가진 요소만 존재하게 됩니다.

 

반대로 “한가지 요소만 제외하고 나머지 요소들은 드래그 동작이 되도록 하고 싶다.”라고 한다면 아래처럼 설정해주시면 됩니다.

$("#myDiv").draggable({
  'cancel' : '.iframeContent'
});

draggable에  cancel 속성을 추가해주게 되면 cancel로 지정된 요소만 드래그를 해도 동작하지 않도록 제외시킬 수 있습니다.