ドラッグ＆ドロップとは、ウェブページ内の要素やローカル環境に保存されたファイルなどのデータを、
マウスで引きずるように移動させて他の場所に置く操作のことです。
HTML5以前にも、mousedownやmouseupなどのイベントで実現することはできましたが、
HTML5ではドラッグ＆ドロップ専用の新しいイベントや新しいメソッド・属性が追加されています。
ドラッグ＆ドロップを理解するには、ドラッグ操作とドロップ操作を分けて考えると理解しやすいでしょう。
ドラッグ操作は要素などのデータをマウスでつかんで引きずるように動かすこと、
ドロップ操作はその動かしたデータをドロップ先の要素内に配置することです。
HTML側では、ドラッグする要素にdraggable属性を指定します。
draggable属性の値には、true・false・値なしのいずれかを指定します。
値を指定しない場合にはデフォルト動作となります。
href属性が指定されたa要素、および、src属性が指定されたimg要素は、デフォルトでドラッグ可となっています。
それ以外の要素は、デフォルトではドラッグ不可です。
<div id="apple" draggable="true">りんご</div>ドロップ先の要素にはdropzone属性を指定することになっています。
ただし、現在のところdropzone属性をサポートしているブラウザはまだ無い（？）ようなので、
また、dropzone属性を使用しなくても一部ブラウザでドラッグ＆ドロップ機能を実現できるので、
このページで紹介するサンプルではひとまずdropzone属性を指定していません。
JavaScript側では、ドラッグ開始時にDataTransferというオブジェクトにドラッグするデータをセットしておき、
ドロップ時にそのデータを取り出して、ドラッグデータをドロップ先へ受け渡すことでドラッグ＆ドロップを実現します。
この際、データのセットに使用するのがsetData()メソッド、
データの取得に使用するのがgetData()メソッドです。
ユーザーによるドラッグ操作やドロップ操作は、以下の7つのイベントで取得します。
それぞれのイベント発生時におけるドラッグデータ、および、
ドロップ先の要素の挙動をJavaScriptで制御してやることで、ドラッグ＆ドロップ機能を実現します。
| イベント名 | イベントが発生するタイミング | デフォルト動作 |
|---|---|---|
| dragstart | ドラッグ開始時 | ドラッグを開始する |
| drag | ドラッグが継続している間 | ドラッグを継続する |
| dragenter | ドラッグ要素がドロップ要素に入った時 | ユーザーによるドロップ操作を拒否 |
| dragleave | ドラッグ要素がドロップ要素から出た時 | 何もしない |
| dragover | ドラッグ要素がドロップ要素に重なっている間 | 現在のドラッグ操作をリセットする |
| drop | ドロップ時 | （場合による） |
| dragend | ドラッグ終了時 | （場合による） |
ドラッグ操作では、ドラッグするデータをDataTransferオブジェクトにセットすることで、ドロップ先に受け渡すことのできる状態にします。
/***** ドラッグ開始時の処理 *****/
function f_dragstart(event){
//ドラッグするデータのid名をDataTransferオブジェクトにセット
event.dataTransfer.setData("text", event.target.id);
}ドロップ操作では、DataTransferオブジェクトにセットされているデータを取り出して、ドロップ先にドラッグデータを追加します。
ドロップ先の要素は、デフォルトではユーザーによるドロップ操作を受け付けない仕様になっています。
そのため、ドロップを受け付けるように、
dragenterイベントとdragoverイベントのデフォルトアクションをキャンセルしてやる必要があります。
/***** ドラッグ要素がドロップ要素に重なっている間の処理 *****/
function f_dragover(event){
//dragoverイベントをキャンセルして、ドロップ先の要素がドロップを受け付けるようにする
event.preventDefault();
}
/***** ドロップ時の処理 *****/
function f_drop(event){
//ドラッグされたデータのid名をDataTransferオブジェクトから取得
var id_name = event.dataTransfer.getData("text");
//id名からドラッグされた要素を取得
var drag_elm =document.getElementById(id_name);
//ドロップ先にドラッグされた要素を追加
event.currentTarget.appendChild(drag_elm);
//エラー回避のため、ドロップ処理の最後にdropイベントをキャンセルしておく
event.preventDefault();
}
Google Chrome・Safariなどのwebkit系ブラウザでは、CSSに以下の指定を追加してやると、
ドラッグ＆ドロップを動かすことができます。
ドロップ先の要素 {-khtml-user-drag: element;}以下のサンプルはFirefox・Google Chrome・Safariで動作します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=utf-8>
<title>ドラッグ＆ドロップ サンプル</title>
<style>
#fruits {
/*単なるスタイリング*/
width:500px; height:100px; margin:20px; background-color:#FF9966; border:1px solid #cc3333;
}
#dropbox {
/*単なるスタイリング*/
width:500px; height:100px; margin:20px; background-color:#CCFF66; border:1px solid #00cc00;
/*以下はwebkit系ブラウザでドラッグ＆ドロップを動かすための指定（ブラウザのサポートが進めば、必要なくなると思われます）*/
-khtml-user-drag: element;
}
</style>
<script>
/***** ドラッグ開始時の処理 *****/
function f_dragstart(event){
//ドラッグするデータのid名をDataTransferオブジェクトにセット
event.dataTransfer.setData("text", event.target.id);
}
/***** ドラッグ要素がドロップ要素に重なっている間の処理 *****/
function f_dragover(event){
//dragoverイベントをキャンセルして、ドロップ先の要素がドロップを受け付けるようにする
event.preventDefault();
}
/***** ドロップ時の処理 *****/
function f_drop(event){
//ドラッグされたデータのid名をDataTransferオブジェクトから取得
var id_name = event.dataTransfer.getData("text");
//id名からドラッグされた要素を取得
var drag_elm =document.getElementById(id_name);
//ドロップ先にドラッグされた要素を追加
event.currentTarget.appendChild(drag_elm);
//エラー回避のため、ドロップ処理の最後にdropイベントをキャンセルしておく
event.preventDefault();
}
</script>
</head>
<body>
<p>好きな果物は何ですか？</p>
<div id="fruits" ondragover="f_dragover(event)" ondrop="f_drop(event)">
<img src="https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/apple.gif" id="apple" alt="りんご" draggable="true" ondragstart="f_dragstart(event)">
<img src="https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/orange.gif" id="orange" alt="みかん" draggable="true" ondragstart="f_dragstart(event)">
<img src="https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/grape.gif" id="grape" alt="ぶどう" draggable="true" ondragstart="f_dragstart(event)">
</div>
<p>下のボックスに入れてください。</p>
<div id="dropbox" ondragover="f_dragover(event)" ondrop="f_drop(event)">
</div>
</body>
</html>HTML5のドラッグ＆ドロップには、以下のメソッド・属性が用意されています。
| DataTransfer | DataTransferItems | DataTransferItem |
|---|---|---|
| DragEvent | draggable属性 | Editing |
| <前へ | 記事一覧へ | 次へ> |