jQuery ドラッグ・アンド・ドロップする(draggable)

jQuery UIの要素をドラッグ・アンド・ドロップするサンプルです。
Draggable WidgetとDroppable Widgetを使用します。

要素をドラッグ＆ドロップするサンプル

要素をドラッグ＆ドロップするサンプル

要素をドラッグ＆ドロップするサンプルです。
赤、黄、青の四角をドラッグして大きな四角(テーブル1)にドロップするとドロップを検知してメッセージが表示されます。また大きな四角から赤、黄、青の四角を枠外に移動させると枠から外れたことを検知してメッセージが表示されます。

赤

黄

青

テーブル1

コード

上記サンプルのコードです。

<style>
.box{width:30px;height:30px;border:1px solid #000;text-align:center;}
#box1{background-color:red;}
#box2{background-color:yellow;}
#box3{background-color:DodgerBlue;}
#table1{width:150px;height:150px;color:#000;text-align:left;
border:1px solid #000;background-color:BlanchedAlmond;}
</style>

<div class="draggable-area">
	<div id="box1" class="box">赤</div>
	<div id="box2" class="box">黄</div>
	<div id="box3" class="box">青</div>

	<div id="table1">
		<p>テーブル1</p>
	</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
	// ドラッグ
	$('.box').draggable({
		containment:".draggable-area" //ドラッグの範囲を制限
	});
	// ドロップ
	$('#table1').droppable({
		//ドロップした時に呼び出される
		accept:'.box', //ドロップできる対象を指定
		drop: function(e, ui) { 
			$( this )
				.find( "p" )
				.html( ui.draggable.text() + "が枠に入りました" );
		},
		//ドロップの範囲から出た時に呼び出される
		out:function(event,ui){ 
			$( this )
				.find( "p" )
				.html( ui.draggable.text() + "が枠から外れました" );
		}
	});
});
</script>

25行目のdraggableでドラッグできるようになります。
26行目のcontainmentは、ドラッグの範囲を制限しています。
29行目のdroppableでドロップできるようになります。
31行目のacceptはドロップできる対象を指定しています。
32行目のdropはドロップした時に呼び出されます。
38行目のoutはドロップの範囲から出た時に呼び出されます。

Draggable Widget

jQuery UIのライブラリです。
要素をクリックしたままにすると要素を移動させることができます。
jquery.min.jsに加えてjquery-ui.min.jsを追加します。
以下はjQuery UIのDraggable Widgetのリンクです。
http://api.jqueryui.com/draggable/

Droppable Widget

jQuery UIのライブラリです。
要素をドロップすることができます。
ドロップした時に処理を行わさせることができます。
jquery.min.jsに加えてjquery-ui.min.jsを追加します。
以下はjQuery UIのDroppable Widgetのリンクです。
http://api.jqueryui.com/droppable/