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

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

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

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

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

 

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

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

 

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

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

찐빵

이 곳에 작성된 모든 컨텐츠는 CCL 규약의 CC BY-NC-SA (저작자표시-비영리-동일조건변경허락) 조건을 따릅니다. 비상업적 용도로 출처를 밝혀주시면 얼마든지 공유 가능합니다.

You may also like...

%d 블로거가 이것을 좋아합니다: