JavaScript入門[HTML5編]DragDropの基礎

  1. HOME
  2. JavaScript入門[HTML5編]
  3. DragDropの基礎

ここから、DragDropについて見ていきます。 このページでは、HTML側でドラッグするのに必要な記述と、 関連するイベントについて解説していきます。

draggable属性

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

draggable = "true / false / auto"
HTMLのタグ内に記述するとドラッグ可能(不可能)となります。
属性値trueならドラッグ可能に、falseなら不可となります。
autoならデフォルト値がセットされます。

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

<!-- imgタグは元々ドラッグ可、以下の3つはどれもドラッグできる -->
<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イベントに記述します。

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

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);

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