| 目次 |
|---|
|
・Drag and Drop APIとは ・Drag and Drop APIの使い方 |
Drag and Drop APIは、マウス操作で行うユーザーインターフェースの仕組み(API)です。
今日のコンピュータのユーザーインターフェース(UI)は、グラフィカルユーザーインターフェース(GUI)が用いられることが一般的になっています。
GUIの入力デバイスは、キーボードとマウスによって構成されることがほとんどです。
特にマウス操作は、現行のGUIにはなくてはならないデバイスです。
ウェブ標準にも、「mouseup/down/over/out/move」などのイベントが規定されています。
しかし、マウスによるドラッグ及びドロップ操作は、ウェブ標準では規定されておらず、ウェブ標準に規定されているマウス操作を駆使して、「ドラッグ＆ドロップ」らしきものを実現させていました。
今後は html5によって、ドラッグ及びドロップ操作のAPIが策定され、ウェブ標準として使えるようになります。
各ブラウザの対応
Drag and Drop APIは、2011年8月現在以下のブラウザで対応しています。
FireFox 3.5～、Safari 5～、Google Chrome 9～、IE 9～
Drag and Drop APIは、ドラッグする要素とドロップされる要素に分かれます。
それぞれのイベントを定義することで実装してゆきます。
ブロック要素とできる要素は、ドラッグする要素にも、ドロップされる要素にもなれます。
ドラッグする要素
ドラッグ(マウスでつかんで移動)する要素は、ドラッグ時に以下のようなイベントを定義することができます。
- dragstart
- ドラッグ開始時に発生するイベント
- drag
- ドラッグ中に発生するイベント
- dragend
- ドラッグ終了時に発生するイベント
ドロップされる要素
ドロップされる(要素上にドラッグ要素を入れられる)要素は、ドロップ時に以下のようなイベントを定義することができます。
- dragenter
- ドラッグ要素がドロップ要素に入ったときに発生するイベント
- dragleave
- ドラッグ要素がドロップ要素から離れた時に発生するイベント
- dragover
- ドラッグ要素がドロップ要素上を移動する時に発生するイベント
- drop
- ドラッグ要素がドロップ要素にドロップされた時に発生するイベント
以下は、Drag and Drop APIのコーディング及び実装例です。
リスト1. Drag and Drop APIの例
var drag01 = document.getElementById('img01');
var drop01 = document.getElementById('dropBox');
// ドラッグ開始
drag01.ondragstart = function( evt ){
// ドラッグしているオブジェクトのIDを転送
evt.dataTransfer.setData("drag_id", evt.target.id);
//ドロップ側のイメージの入れ先をクリア
var img = document.getElementById('drop_img');
img.innerHTML = "";
//ドロップ領域のメッセージの消去
var msg02 = document.getElementById('drop_msg');
msg02.innerHTML = "";
}
// ドラッグ中
drag01.ondrag = function( evt ){
//ドラッグ中のメッセージを表示
var msg01 = document.getElementById('drag_msg');
msg01.innerHTML = "現在、ドラッグ中";
}
// ドラッグ終了
drag01.ondragend = function( evt ){
//ドラッグ中のメッセージの消去
var msg01 = document.getElementById('drag_msg');
msg01.innerHTML = "";
}
// ドロップ領域に入った
drop01.ondragenter = function( evt ){
//ドロップ領域のメッセージを表示
var msg02 = document.getElementById('drop_msg');
msg02.innerHTML = "ドロップ領域に入りました。";
}
// ドロップ領域から出た
drop01.ondragleave = function( evt ){
//ドロップ領域のメッセージを表示
var msg02 = document.getElementById('drop_msg');
msg02.innerHTML = "ドロップ領域を出ました。";
}
実装例
ドラッグする要素
ドロップされる要素