jQuery UI 의 상호작용(interaction) draggable() 함수 살펴보기

IT공부방/jQuery, ajax, java

by 동해둘리 2016. 8. 2. 11:37

jQuery UI 가 제공하는 상호작용(Interaction) 기능은 다음과 같다.

draggable / droppable / resizable / selectable / sortable

그 중에서 이번 포스팅에서 살펴볼 기능은 Draggable 입니다.

아래 코드와 같이 $( "#draggable" ).draggable(); 이렇게만 넣어주면 바로 drag 가 가능한 상태가 됩니다.

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>jQuery UI Draggable - Default functionality</title>

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">

  <link rel="stylesheet" href="/resources/demos/style.css">

  <style>

  #draggable { width: 150px; height: 150px; padding: 0.5em; }

  </style>

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

  <script>

  $( function() {

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

  } );

  </script>

</head>

<body>

<div id="draggable" class="ui-widget-content">

  <p>Drag me around</p>

</div>

</body></html

정리하자면, 특정 엘리먼트나 DIV 를 Drag 가능하게 하려면 아래와 같이

$( 'img' ).draggable();

Drag 를 취소하려면

$( ".img" ).draggable( "option", "disabled", true );

ajax 로 폼데이터 서버전송 후 파일생성 및 DB저장, serialize() (0)	2016.08.09
nodejs 및 jQuery 를 이용한 서버와의 통신 참고하기 (0)	2016.08.05
jQuery 함수 addClass() appendTo() (0)	2016.07.30
AngularJS 자바스크립트 라이브러리 살펴보기 (0)	2016.07.29
jQuery FileUpload Plugin ... Multiple 가능, 미리보기 가능 (0)	2016.07.28

동해둘리의 IT Study