JavaScript入門[HTML5編]DragDropの基礎

draggable属性

最初に、ドラッグ・ドロップするために必要なHTMLタグの属性を見ておきましょう。

draggable = "true / false / auto"

HTMLのタグ内に記述するとドラッグ可能（不可能）となります。

属性値trueならドラッグ可能に、falseなら不可となります。

autoならデフォルト値がセットされます。

HTMLのタグのうちimgタグやaタグは元からドラッグ可能となっているので、 draggableの記述は必要ありません。また属性値autoを指定しても同じです。

<!-- imgタグは元々ドラッグ可、以下の３つはどれもドラッグできる -->
<img draggable="true" src="a.jpg">
<img draggable="auto" src="b.jpg">
<img src="c.jpg">

<!-- 初期状態でドラッグ不可のタグは、draggable属性を記述する -->
<div draggable="true"></div>

Drag Drop関連のイベント

今度はドラッグ・ドロップ関連で発生するイベントを見ておきます。

dragstart

ドラッグが開始した時に発生するイベント

dragenter

ドラッグ要素が入ってきた時に発生するイベント

dragover

ドラッグ要素が中に入っている間に発生するイベント

drop

ドラッグ要素をドロップした時に発生するイベント

このうち、ドラッグの始まりのコードを記述するのはdragstartイベントです。 ドロップされた時のコードは、dropイベントに記述します。

後の２つ、dragenterイベントとdragoverイベントは何をするのでしょうか。 この２つはブラウザで元々設定されている動作を停止させるコードを記述します。 これを抑制しておかないと、ドラッグ・ドロップがうまく動かないのです。

dataTransfer

JavaScriptでドラッグ・ドロップを制御する場合、 dataTransferというものを使ってデータを橋渡しします。 ドラッグ開始時にドラッグしているデータをdataTransferにセットし、 ドロップ時にdataTransferからデータを取り出すことになります。以下のように記述します。

event.dataTransfer.setData( データの形式 , データ )

ドラッグされているデータをdataTransferにセットします。

event.dataTransfer.getData( データの形式 )

dataTransferからデータを取り出します。

上記のデータの形式の記述方法ですが、ブラウザによって実装がまちまちなので、 ひとまず主要なブラウザで利用できるMIME Typeで記述していきます。

頭についている「event」ですが、イベントを受け取る関数の引数に指定したものが来ます。 任意の変数名（引数名）を付けて構いません。

document.getElementById(id名).addEventListener("dragstart", function (event){

 event.dataTransfer.setData();

},false);

では実際にドラッグ・ドロップを実装したサンプルを次のページで見てみましょう。