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のテーマ編集画面にもあった様な気がします。