jQuery UI (4) - 상호작용 플러그인

jQuery UI 플러그인의 상호작용 플러그인

jQuery UI 플러그인의 상호작용 플러그인
플러그인 명 설명
Draggable 문서 객체를 드래그해 위치를 변경할 수 있습니다.
Droppable 문서 객체를 다른 문서 객체 안에 넣을 수 있습니다.
Resizable 문서 객체의 크기를 변경할 수 있습니다.
Selectable 문서 객체를 선택할 수 있습니다.
Sortable 문서 객체의 순서를 변경할 수 있습니다.


jQuery UI Draggable 플러그인의 옵션

jQuery UI Draggable 플러그인의 옵션
속성 이름 자료형 설명
axis String('x' 또는 'y') 이동 축
grid array 이동 거리
helper String('original' 또는 'clone') 이동 방식
scroll Boolean 문서 객체를 스크롤할 때 스크롤이 움직일지 지정
zindex Number z-index 속성 지정


jQuery UI Draggable 플러그인의 이벤트

jQuery UI Draggable 플러그인의 이벤트
이벤트 이름 이벤트 타입 설명
create dragcreate 드래그 객체를 생성할 때 발생합니다.
start dragstart 드래그를 시작할 때 발생합니다.
drag drag 드래그할 때 발생합니다.
stop dragstop 드래그가 끝날 때 발생합니다.


상호작용 예제



HTML

							<div id="wrap" >
										
							</div>
							<div id="dock" class="ui-state-error">
								
							</div>
						


CSS

							*{margin:0;padding:0;}
							html{height:100%;} /* html, body, #wrap에 height:100% 적용에 주의 */
							body{height:100%;min-height:100%;font-size:62.5%;}
							.item{margin:3px;padding:5px;}
							.item > img{width:100px;height:100px;}

							#wrap {overflow:hidden;height:100%;}
							#wrap > div {float:left;}

							#dock{position:fixed;min-height:120px;width:100%;bottom:0px;z-index:1;}
							#dock > div {float:right};						
						


SCRIPT

							$(function(){
								// 문서 객체를 생성합니다.
								for (var i=0; i<21; i++) {
									var icon = '';
									icon += '<div class="ui-widget-content ui-corner-all item">';
									icon += '    <img src="/florakid_lib/images/sample2/'+i+'.png" />';
									icon += '</div>';

									$("#wrap").append(icon);
								}

								//jQuery UI Draggable  플러그인을 사용합니다.
								$("#wrap > div").draggable({
									helper: 'clone',
									zIndex: 100,
									scroll: false
								});

								// jQuery UI Droppable 플러그인을 사용합니다.
								$("#dock").droppable({
									accept: '#wrap > div',
									drop: function (event, ui) {
										$(ui.draggable).fadeOut(function () {
											$(this).appendTo("#dock").fadeIn();	
										});						
									}
								});
								$("body").droppable({
									accept: '#dock > div',
									drop: function (event, ui) {
										$(ui.draggable).fadeOut(function () {
											$(this).appendTo("#wrap").fadeIn();	
										});
									}
								});
							});