🤷♀️ jQuery UI Draggable 라이브러리 사용법
마우스 클릭 드래그로 엘리먼트를 옮길 수 있는 jQuery UI 라이브러리의 draggable 사용법 에 대해 알아봅시다.
공식 가이드가 궁금하신 분들은 아래 링크에서 확인하세요😊
https://jqueryui.com/draggable/
Draggable | jQuery UI
Draggable Allow elements to be moved using the mouse. Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport. view source 1 2 3 4 5 6 7 8 9 10 11 12 13 14 1
jqueryui.com
예시 전체 코드
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable</title>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; color: white; background-color: red; }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#draggable" ).draggable();
} );
</script>
</head>
<body>
<div> 드래그 불가능한 영역 </div>
<div id="draggable" class="ui-widget-content">
<p>드래그 가능 영역</p>
</div>
</body>
</html>
코드 상세 설명
1. jquery, jquery-ui 라이브러리 호출
html <head></head>사이에 라이브러리를 불러와주세요.
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
2. 움직일 엘리먼트에 draggable()함수 작성
클릭 드래그로 움직일 엘리먼트 is/class에 draggable 함수를 호출해주세요.
<script>
$( function() {
$( "#draggable" ).draggable();
} );
</script>'WEB > JS' 카테고리의 다른 글
| [jQuery] 드래그 앤 드롭 라이브러리 (Draggable) (0) | 2021.08.09 |
|---|---|
| [js] 자바스크립트 비동기 처리 : 콜백 함수(Promise / Async&await) (0) | 2021.07.28 |
