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



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

1.CSSの記述例

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.8em;
	text-align:center;
	padding:15px 0;
}
#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="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://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>小さいボックスを大きいボックスにドラッグできます。<br />ドロップを中止すると元の位置に戻ります。</h1>
        
    <div class="clDemoArea">
    
      <div id="wrapper">
        <div id="draggable1" class="ui-widget-content">
            <p>このボックスをドラッグして下さい。</p>
        </div><!--/draggable1-->
      </div><!--/wrapper-->

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

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

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

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