jQuery UIのdraggable・droppableを使用しボックスをドラック＆ドロップしてみる

jQuery UIのdraggable・droppableを使用して、ドラッグ＆ドロップを実装してみました。
WordPress管理画面のウィジェット機能みたいな感じです。

1．CSSの記述例

<style type="text/css">
<!--
#idWrap{
	width:600px;
	margin:0 auto;
	text-align:center;
}
#wrapper{
	float: left;
}
#draggable1, #draggable2{
	width:100px;
	height:100px;
	float:none;
	margin:20px;
	padding:20px;
	font-size:12px;
	line-height:1.4em;
}
#droppable{
	width:300px;
	height:300px;
	float:left;
	margin:20px;
	padding:20px;
	font-size:16px;
}
-->
</style>

2．読込むJsとCSSの記述例

 	<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>

3．JavaScriptの記述例

<script type="text/javascript">
$(function() {

	$('#draggable1').draggable({
		cursor: 'move',
		revert: 'invalid'
	});

	$('#droppable').droppable({
		activeClass: 'ui-state-hover',
		hoverClass: 'ui-state-active',
		drop: function(event, ui) {
			$(this).addClass('ui-state-highlight').find('p').text('ドロップ完了。');
		}
	});

});
</script>

4．HTMLの記述例

<div id="idWrap">

<h1>小さいボックスを大きいボックスにドラッグできます。
ドロップを中止すると元の位置に戻ります。</h1>

        

<div class="clDemoArea">
    

<div id="wrapper">

<div id="draggable1" class="ui-widget-content">
            
このボックスをドラッグして下さい。
</div>
<!--/draggable1-->
</div>
<!--/wrapper-->


<div id="droppable" class="ui-widget-header">
          
ココにドロップして下さい。
</div>
<!--/droppable-->

</div>
<!--/clDemoArea-->
    
</div>
<!--/idWrap-->

jQuery UIのdraggable・droppableを使用しボックスをドラック＆ドロップするデモページ

見せる専用ページより、コントロールパネルページとかで利用しそうですね。
EC-CUBEのテーマ編集画面にもあった様な気がします。