jQuery UIのdraggable・droppableを使って、ボックスエリアをドラッグ&ドロップする方法をご紹介します。
WordPress管理画面の「外観」→「ウィジェット」みたいなイメージです。
Contents
ディスプレイ広告
jQuery UIのdraggable・droppableを使ってボックスエリアをドラッグ&ドロップするCSSの記述
※jquery-ui.cssファイルを読み込みます。ドラッグ&ドロップエリア(#draggable1、#draggable2、#droppable)の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>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
jQuery UIのdraggable・droppableを使ってボックスエリアをドラッグ&ドロップするJavaScriptの記述
※jquery.min.js、jquery-ui.min.jsファイルを読み込みます。$(ドラッグエリア).draggable({オプション})、$(ドロップエリア).droppable({オプション})でドラッグエリアとドロップエリアに対して記述します。
<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>
<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>
ボックスエリアをドラッグ&ドロップするHTMLの記述
※ドラッグ&ドロップエリア(id=”draggable1″、id=”droppable”)を用意しました。必要に応じて変更して下さい。
<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を使用しボックスをドラック&ドロップするデモページ
jQuery UIのdraggable・droppableを使用しボックスをドラック&ドロップするデモページ
見せる専用ページより、コントロールパネルとかで利用しますね。EC-CUBEのテーマ編集画面にもあった様なイメージです。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。