[jQuery] UI draggable options 적용하기 (ft. containment, handle)

앞서 draggable() 메서드를 통해 드래그 기능을 부여하는 게시글을 작성했었는데

[jQuery] 지정된 dom 요소 드래그 기능 부여하기 (ft. jQuery UI - .draggable())

[jQuery] 지정된 dom 요소 드래그 기능 부여하기 (ft. jQuery UI - .draggable())

 

draggable() 메서드에는 각종 options들이 존재하는데 그 중에서

내가 직접 써본 containment 옵션과 handle 옵션에 대해 기록해두고자 한다.

 

containment 옵션은 드래그 대상이 특정 영역을 벗어나지 못하게 하는 옵션이며

handle 옵션은 드래그 대상이 포함하는 특정 요소를 대상으로만 드래그 기능이 작동하도록 하는 옵션이다.

 

예제 코드를 통해 알아보자.

---

▷예제1)

<div class="drag_test">
	<div class="header">...</div>
	...
</div>
  
<script type="text/javascript">
	$( '.drag_test' ).draggable({
		scroll : false,
		containment : 'parent', //부모 요소 안에서만 이동 범위 제한
		handle : '.header' // drag 대상 안 특정 요소에 제한 (여러개 사용 가능)
	});
</script>

 

containment 옵션을 주는 이유는 그냥 draggable() 메서드만 적용시켰을 경우 화면을 벗어나 무한스크롤 상태가 된다. 그래서 특정 영역으로 이동 범위를 제한하기 위해 사용하는것이며, 간단하게 parent정도로 부모 요소에 재한을 둘 수 있다.(꼭 parent가 아니여도 상관없다.)

 

handle의 경우는 드래그 기능 활성화 대상을 제한하는 것인데 보통 header를 통해 이동이 되는게 일반적이기 때문에 특정 요소를 통해서만 드래그가 가능하도록 제한을 둔것이다.

 

이 외에도 필요에 따라 다양한 옵션을 줄 수 있으며

 

아래 url을 통해 다양한 options들을 확인해보자.

참고: https://api.jqueryui.com/draggable/

Draggable Widget | jQuery UI API Documentation