カメニッキ

カメとインコと釣りの人です

HTML5のドラッグアンドドロップAPIについて

old

その名前通りマウスでのドラッグアンドドロップをブラウザ上でサポートするためのAPIです。

  • ドラッグ元になる要素へはdraggable属性を指定します。

例：

<img src="hoge.png" alt="hoge" draggable="true">
  • draggable="true"->ドラッグ可能
  • draggable="false"->ドラッグ不可
  • draggable=""->デフォルト動作

※デフォルトでtrueになっているものはimg・a要素のみです。

  • ドラッグイベント

以下があります。

  • dragstart->ドラッグ開始
  • drag->ドラッグ中(マウスでつかんだ状態)
  • dragend->ドラッグ終了
  • ドロップイベント

以下があります。

  • dragenter->ドラッグ元要素がドロップ先要素内に入った
  • dragleave->ドラッグ元要素がドロップ先要素から出た
  • dragover->ドラッグ元要素がドロップ先要素内にいる
  • drop->ドロップ中

上記の、ドラッグイベント・ドロップイベントはそれぞれ「on〜〜〜」イベントハンドラが存在するので、それを用いて各イベントごとの動作を指定する。

例として、「ある画像(ドラッグ元)をドロップ先に移動させる」を以下に書きます。
[html]

<img id="moto" src="hoge.png" draggable="true" alt="hogeドラッグ元画像" ondragstart="onDragStart(event)" />
<div id="drop" ondrop="onDrop(event)">ドロップ先</div>

[javascript]

//ドラッグ元画像のドラッグ開始時に呼ばれる
function onDragStart(event){
//eventのDataTransferに「text」というキーでドラッグ元要素のidを設定します。
//ドラッグ元からドラッグ先へのデータ受け渡しでは常にこのDataTransferを使用します。
//この場合だと、「moto」が入ります。
event.dataTransfer.setData("text", event.target.id);
}

//ドロップ先要素にドラッグ元要素が置かれたときに呼ばれる
function onDrop(event){
//onDragStart()でセットしたidの値を取得します。
var id = event.dataTransfer.getData("text");
//取得したidのエレメントを取得します。
var element = document.getElementById(id);
//ドロップ先の子要素としてエレメントを追加します
event.currentTarget.appendChild(element);
}

ちょこちょこ誤字などあるかもです。