ドラッグ&ドロップ操作を活用する(1)

HTML5ではブラウザ上でドラッグ&ドロップ操作することができるようになりました。

ドラッグ&ドロップを利用するために以下の2点がポイントとなります。

• ドラッグ元、ドロップ先を定義
• ドラッグ&ドロップされたときの処理を定義

詳しい解説は続きからどうぞ。

ドラッグ元とドロップ先を定義

まずはドラッグ元となる要素とドロップ先となる要素を定義する必要があります。

例えば画像を所定の領域にドラッグ&ドロップできるようにしたい場合、
ドラッグ元となる要素は画像ということになりますので、以下のような定義を行うことになります。

<img src="img_01.png"
   id="img_01"
   draggable="true"
   ondragstart="onDragStart(event)"
/>

draggable属性はその要素がドラッグ可能な要素であるかを指定するための属性です。
true、falseの2種類の値を設定することが可能で、省略した場合はデフォルト値としてtrueが設定されます。
ondragstart属性にはその要素のドラッグ開始時に呼ばれるメソッドを指定します。
ここでは後述するonDragStartメソッドを指定しています。

続いてドロップ先となる要素の定義です。
ここではdiv要素をドロップ先として定義します。

<div id="drop"
ondragenter="onDragEnter(event)"
ondragover="onDragOver(event)"
ondrop="onDrop(event)"
ondragleave="onDragLeave(event)">
画像をココにドラッグ&ドロップしてください。<br>
</div>

ドラッグ&ドロップに関連する4つのメソッドをここで指定します。

[table “162” not found /]

ドラッグ&ドロップされたときの処理を定義

次にドラッグ、およびドロップされたときの処理を実装します。

<script type="text/javascript">
function onDragStart(event){
    msg.innerHTML ="ドラッグ開始";
    event.dataTransfer.setData("text", event.target.id);
}

function onDrop(event){
    var id = event.dataTransfer.getData("text");
    var element = document.getElementById(id);
    event.currentTarget.appendChild(element);
    event.preventDefault();
    msg.innerHTML ="ドロップされました";
}

function onDragOver(event){
    msg.innerHTML ="ドロップ領域に入りました";
    event.preventDefault();
}

function onDragEnter(event){
    msg.innerHTML ="On Drag Enter";
}

function onDragLeave(event){
    msg.innerHTML ="ドロップ領域から抜けました";
}

function onDragStart(event){
    event.dataTransfer.setData("text", event.target.id);
}
</script>

前述した各コールバックメソッドに対応する形で処理を実装していますが、
ドラッグ&ドロップで画像の情報を受け渡すのにDataTransferオブジェクトがポイントになります。
ドラッグが開始されたタイミングでDataTransferオブジェクトにドラッグ元となる画像のIDを
getDataメソッドを使ってセットしています。
そしてドロップされたタイミングでDataTransferオブジェクトからgetDataメソッドを使って
ドラッグ元の画像を取得しています。

次回はドラッグ&ドロップAPIとFile APIを組み合わせて、
ブラウザにドラッグ&ドロップしたファイルを読み取る方法について解説します。