jQuery UIのdraggable・droppableを使ってボックスエリアをドラック＆ドロップ｜DAD UNION

jQuery UIのdraggable・droppableを使って、ボックスエリアをドラッグ＆ドロップする方法をご紹介します。
WordPress管理画面の「外観」→「ウィジェット」みたいなイメージです。

Contents

jQuery UIのdraggable・droppableを使ってボックスエリアをドラッグ＆ドロップするCSSの記述
jQuery UIのdraggable・droppableを使ってボックスエリアをドラッグ＆ドロップするJavaScriptの記述
ボックスエリアをドラッグ＆ドロップするHTMLの記述
jQuery UIのdraggable・droppableを使用しボックスをドラック＆ドロップするデモページ

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-->