PbTimes 情報誌

jQuery UIでドラッグ＆ドロップ　draggableとdroppableの使用方法

2016/02/24

• JavaScript
• Web
• jQuery

draggableとdroppable

概要

jQuery UIを使用して、ドラッグ&ドロップを行います。
要素の移動やコピーをGUI操作で行うときなどに役立ちます。

準備

まずは、 こちらからjQueryをダウンロードします。
次に、 こちらからjQueryUIをダウンロードします。

ダウンロードしたファイルをHTMLで読み込むため、以下のように指定します。

<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>

以上で準備は完了です。

実装サンプル

HTML例

<div class="drag" id="1">ドラッグ元</div>
<div class="drop" id="2">ドロップ先１</div>
<div class="drop" id="3">ドロップ先２</div>

JavaScript例

var myDragAndDrop = function() {
	var drag_id = null;
	var drag_onclick = null;

	$(".drag").draggable({
		zIndex: 9999,
		distance: 10,
		helper: 'clone',
		snap: true,
		start: function(event, ui) {
			drag_id = $(this).attr('id');
		},
		stop: function(event, ui) {
		}
	});

	$( ".drop" ).droppable({
		accept: ".drag",
		over: function( event, ui ) {
			$( this ).addClass( "over" );
		},
		out: function( event, ui ) {
			$( this ).removeClass( "over" );
		},
		drop: function( event, ui ) {
			$( this ).removeClass( "over" );

			var drop_id = $(this).attr('id');
			// drag_id,drop_idでドラッグ元、ドロップ先を判定して処理する
		}
	});
}

$(function(){
	myDragAndDrop();
});