jEasyUI の基本的なドラッグ アンド ドロップ


このチュートリアルでは、HTML 要素をドラッグ可能にする方法を説明します。この場合、3 つの DIV 要素を作成し、それらのドラッグと配置を有効にします。

19.png

まず、3 つの <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();

2 番目の <div> 要素については、元の要素のクローンを作成するプロキシを作成することでドラッグ可能にします。 

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

3 番目の <div> 要素については、カスタム プロキシを作成してドラッグ可能にします。 

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

jQuery EasyUI のサンプルをダウンロード

jeasyui-dd-basic.zip