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

2016/02/24

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">ドロップ先1</div>
<div class="drop" id="3">ドロップ先2</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();
});
  • このエントリーをはてなブックマークに追加
Related

PHPで動画の撮影日を取得

PHPで動画の撮影日を取得 概要 PHPからffprobeコマンドを実行し、動画の撮影日時を取得します。 コード $posted_at = ...

FullCalendarでGoogleカレンダーのようなUIを実装

jQueryプラグインFullCalendarのサンプル 概要 FullCalendarを使用して、GoogleカレンダーのようなUIを実装する使用例を...

PHP Laravel5.2でmulti-auth(複数テーブルでの認証)を実装

Laravel5.2でマルチ認証 概要 LaravelとはPHPの中で今最も伸びているフレームワークです。 処理速度が遅いなどありますが、かなり使い安く拡...

PHP 正規表現でIPアドレス形式の文字列か判定

正規表現でIPアドレスの入力チェック 概要 フォームで入力されたIPアドレスが正当な文字列か判定するためのバリデーション処理を実装します。 基本的...

rbenv環境でRuby on Railsのアプリケーションを一瞬で自動生成

アプリケーション構築時に最初に行う手順 概要 アプリケーションを作成するまでの手順を記載しています。 rbenvなどの環境が設定済と仮定して話を進めま...

Rails devise・authority・rolifyで権限付きの認証機能

devise・authority・rolify 概要 3つのGemを使用して、権限付き認証機能を実装します。 gem インストール Gemfile ...
トップへ戻る