본문 바로가기
Library & Framework/jQuery

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

by 썸머워즈 2020. 7. 10.
반응형

- 지정된 dom 요소 드래그 기능 부여하기 -


dom 요소를 제어할 때

드래그 기능을 사용해야 하는 경우가 생길수 있는데

최근에 자주 쓰게 되어서 정리해두고자 한다.


jQuery UI 에서 제공하는 기능들이 생각보다 다양한데

이 드래그 기능 역시 jQuery UI에서 제공해주는 기능이다.

상세한 옵션은 많지만 아주 간단하게 드래그만 되도록 선언해 주는 방법에 대해 예제를 통해 접해보자.

 

▷예제1) 

<div class="drag_test">
...
</div>

<script type="text/javascript">
    $( '.drag_test' ).draggable();
</script>

 

보면 알겠지만 dom 요소를 jQeury로 선택하고나서 .draggable()을 선언만 해주면 드래그가 가능하다.

상세 옵션은 아래에서 참조하여 개발하도록 하자.

 

참고 : 

https://superkts.com/jquery/draggable (jQuery 공작소) 

https://api.jqueryui.com/draggable/ (jQuery UI)

반응형


댓글

TOP