jEasyUI 기본 드래그 앤 드롭

이 튜토리얼에서는 HTML 요소를 드래그 가능하게 만드는 방법을 보여줍니다. 이 경우 세 개의 DIV 요소를 만든 다음 드래그 및 배치를 활성화하겠습니다.

먼저 세 개의 <div> 요소를 만듭니다.

	<div id="dd1" class="dd-demo"></div>
	<div id="dd2" class="dd-demo"></div>
	<div id="dd3" class="dd-demo"></div>

첫 번째 <div> 요소는 기본적으로 드래그 가능하게 만듭니다.

	$('#dd1').draggable();

두 번째 <div> 요소의 경우 원본 요소를 복제하는 프록시를 생성하여 드래그 가능하게 만듭니다.

	$('#dd2').draggable({
		proxy:'clone'
	});

세 번째 <div> 요소의 경우 사용자 정의 프록시를 생성하여 드래그 가능하게 만듭니다.

	$('#dd3').draggable({
		proxy:function(source){
			var p = $('<div class="proxy">proxy</div>');
			p.appendTo('body');
			return p;
		}
	});

jQuery EasyUI 예제 다운로드

jeasyui-dd-basic.zip