7月 242012
 
このエントリーをはてなブックマークに追加
はてなブックマーク - HTML5 を使った簡単な Drag and Drop (ドラッグ & ドロップ)
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Post to Google Buzz
Bookmark this on FC2 Bookmark
Share on FriendFeed

 

画像をドラッグ&ドロップするサンプルです。

HTML5対応のブラウザで確認すると動きが確認出来ます。 ⇒ サンプル

ちなみにjQueryを使用したドラッグ&ドロップのサンプルはこちらから。 ⇒ サンプル

コードです。

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset=utf-8>
	<style>
	#cart { width: 150px; height: 250px; padding: 1.5em; border-width:1px; border-style:solid; }
	</style>
</head>
<body>

<h2>Dropエリア</h2>
<div id="cart"></div>

<h2>Dragエリア</h2>
<ul id="items">
	<li>
		<img src="http://okaidoku.net/img/rogo.jpg" id="b1" border="0" width="60" height="30" /></a>
	</li>
	<li>
		<img src="http://kazefuku.net/images/jushou.png" id="b2" border="0"  width="60" height="60"  />
	</li>
	<li>
		<img src="http://manpokei.net/img/logo.gif" id="b3" border="0" width="100" height="40"  />
	</li>
</ul>

<script>

	document.addEventListener("DOMContentLoaded", function() {

		//////////////////////
		// ドラッグ側の処理
		//////////////////////

		var imgs = document.querySelectorAll('#items>li>img');
		for( var i=0; i<imgs.length; i++ ) {

			// img要素
			var img = imgs.item(i);

			// img要素にdragstartイベントのリスナーをセット
			img.addEventListener("dragstart", function(event) {
				// データ転送用のデータをセット
				event.dataTransfer.setData("text", event.target.id);
			}, false);

		}

		//////////////////////
		// ドロップ側の処理
		//////////////////////

		// カートのdiv要素にdragenterイベントのリスナーをセット
		var cart = document.querySelector('#cart');
		cart.addEventListener("dragenter", function(event) {
			// デフォルトアクションをキャンセル
			event.preventDefault();
		}, false);

		// カートのdiv要素にdragoverイベントのリスナーをセット
		cart.addEventListener("dragover", function(event) {
			// デフォルト・アクションをキャンセル
			event.preventDefault();
		}, false);

		// カートのdiv要素にdropイベントのリスナーをセット
		cart.addEventListener("drop", function(event) {
			//デフォルトアクションをキャンセル
			event.preventDefault();

			// データ転送により送られてきたデータ
			var id = event.dataTransfer.getData("text");
			// ドロップされたimg要素
			var img = document.getElementById(id);
			// p要素を生成しカートに追加
			var p = document.createElement("p");
			p.appendChild(img);
			cart.appendChild(p);
		}, false);
	}, false);

</script>

</body>

</html>

 

上記コードをコピーしてWebサーバにあげれば、ドラッグ&ドロップが出来ます。

通常、ドラッグ側で発生するイベントは

  • dragstart ・・・要素をドラッグした時にイベント発生
  • drag    ・・・要素をドラッグしている最中に連続してイベント発生
  • dragend  ・・・要素のドラッグが終了したときに発生
ドロップ側で発生するイベントは
  • dragenter ・・・要素がドロップ領域に入ってきた時に発生。
  • dragleave ・・・要素がドロップ領域から出た時に発生
  • dragover  ・・・要素がドロップ領域上で移動している最中、連続してイベント発生
  • drop     ・・・要素がドロップ領域にドロップされた時発生
上記サンプルコードでは、シンプルなソースにする為、省略できるイベントは省略して書いています。

後は、コメントを沢山書いているので、説明はそちらをご確認下さいませ。

 

以下のサイトがドラッグ & ドロップについて詳しく書かれています

 

 

・HTML5のAPI、および、関連仕様

 

 

 

 

 


 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam Protection by WP-SpamFree

Get Adobe Flash player