2013/08/23

HTML5新API、強化されたドラッグ&ドロップについて!

HTML5新API、強化されたドラッグ&ドロップについて!

今まではwebサイトの要素をドラッグ&ドロップして何かしらの演出をしたい場合、jQueryなどのプラグインを使用する必要がありました。

HTML5ではドラッグ&ドロップのAPIが追加されましたので簡単な記述でドラッグ&ドロップの機能が扱えます。

目次

■ドラッグ&ドロップできる要素

HTML5では<img>,<div>,<p>,<span>などほぼすべての要素をドラッグ&ドロップできます。

宣言も簡単でHTML文に<img draggable="true">というようにdraggable="true"を付けるだけです。

■ドラッグ&ドロップAPIでできる事

ドラッグされたオブジェクトがどこにドロップされたらどういうアクションを取るかはJavaScriptで記述します。

取得できるイベントは

dragstart ドラッグ開始時
drag ドラッグ中
dragend ドラッグ終了時
dragenter ドラッグしている要素がエリアに入った時
dragleave ドラッグしている要素がエリアから出た時
dragover ドラッグしている要素がエリア上に居る時
drop ドロップ中

となってます。

■ドラッグ&ドロップAPIのサンプルコード

<!DOCTYPE html> 
<html lang="ja">
    <head> 
		<script type="text/javascript">
        
			// ドラッグ開始時にデータの値を設定する
			function DragStart(event) {
			  event.dataTransfer.setData("text", event.target.id);
			}
			
			// ドロップ時に元のドラッグ値を取得し、現在の要素上に入れ子で保存する
			function Drop(event) {
			  var id = event.dataTransfer.getData("text");
			  var elm = document.getElementById(id);
			  event.currentTarget.appendChild(elm);
			  event.preventDefault();
			}
			
			// ブラウザ標準のドロップ動作をキャンセル
			function DragOver(event) {
			  event.preventDefault();
			}
        </script>
        <meta charset="UTF-8">
        <title>HTML5</title>
        <style>
        div.draggable {
            width:100px;height:50px;background-color:red; padding: 10px; margin:10px; color: white;
        }
        div.droppablea {
            width:250px; height:100px; padding:10px; color: white;
        }
        div.droppable {
            width:250px; height:130px; background-color:blue; padding:10px; color: white;
        }
        </style>
    </head>
    <body>
        <h1>Drag & Drop Sample</h1>
        <div  class="droppablea" id="drop" ondragover="DragOver(event)" ondrop="Drop(event)" >
            <div class="draggable" id="a" draggable="true" ondragstart="DragStart(event)" >
                ドラッグできます
            </div>
        </div>
        <div id="drop" class="droppable" ondragover="DragOver(event)" ondrop="Drop(event)" >
          ここにドロップしてください。
        </div>
    </body>
</html>

40行目ondragoverondrop

41行目ondragstart

45行目ondragoverondrop

がドラッグ&ドロップのイベントを取得してそれぞれの関数を呼び出しています。

上記のコードを実行すると以下のようになります。

ドラッグできます
ここにドロップしてください。

■ドラッグ&ドロップAPIを使っているサイト

Block Puzzle
ドラッグ&ドロップでブロックパズルができます。

Block Puzzle

Color Drop!
ドラッグ&ドロップでカラーの配合ができます。

Color Drop!

puzzle
ドラッグ&ドロップを使ってジグソーパズルができます。

puzzle

bolaGravedad
黒いボールをドラッグ&ドロップで投げる事ができます。

bolaGravedad

■まとめ

このAPIを使えばスマートフォントと同じように直感的に操作できるようになると思います。

ゲームやウェブアプリの開発で便利に使えるのではないでしょうか。