ドラッグ＆ドロップは、HTML5標準の一部です。
長方形に上記画像をドラッグ。
HTMLで
HTML5ワーキングドラフト仕様は、ドラッグ＆ドロップをサポートしています。 HTML5は、などの機能をドラッグアンドドロップの種類をサポートしています。
- ドラッグ＆ドロップテキストとHTMLコード
- ドラッグ＆ドロップHTML要素
- ドラッグ＆ドロップファイル
必要なアクションに基づいて、上記のタイプのいずれかを使用することができます。 HTML要素は、その現在の位置を移動させるためにドラッグされると、そのIDが宛先親要素に送信されることに注意してください。 それは、テキストを送信し、最初のグループとみなすことができます。
Googleのウェブベースの電子メールアプリケーションのGmailは、最新のGoogle ChromeブラウザとAppleのSafari（5.xの）内の画像や添付ファイルのドラッグ＆ドロップをサポートしています。 そして、Google画像検索では、ドラッグ＆ドロップをサポートしています。
ドラッグアンドドロップ
ドラッグ＆ドロップは非常に共通の特徴です。 あなたはときにある"grab"オブジェクトを、別の場所にドラッグします。
HTML5では、ドラッグアンドドロップは、標準の一部であり、そして任意の要素をドラッグすることができます。
ブラウザのサポート
表中の数字は完全にドラッグ＆ドロップをサポートする最初のブラウザのバージョンを指定します。
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
HTMLのドラッグ＆ドロップの例
以下の例では、簡単なドラッグ＆ドロップの例です：
例
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html> »それを自分で試してみてください それは複雑なように見えるが、ドラッグアンドドロップイベントのすべての異なる部分を通過することができます可能性があります。
要素のドラッグ可能にします
まず第一に：設定し、要素をドラッグ可能にするためにdraggableに属性をtrue ：
<img draggable="true">
どのようなドラッグする- ondragstartとsetData()
次に、要素がドラッグされたときにどうするかを指定します。
上記の例では、 ondragstart属性は、関数を呼び出しdrag(event)のデータをドラッグするために何を指定しています、。
dataTransfer. setData() dataTransfer. setData()メソッドは、データ型とドラッグされたデータの値を設定します。
function drag(ev) {
ev.dataTransfer. setData("text", ev.target.id) ;
}
この場合、データタイプは"text"と値がドラッグ可能要素のIDである("drag1")
どこにドロップすること- ondragover
ondragoverドラッグデータをドロップできる場所イベントが指定されます。
デフォルトでは、データ/要素が他の要素にドロップすることはできません。 ドロップを可能にするために、我々は、要素のデフォルト処理を防ぐ必要があります。
これは、呼び出しによって行われているevent. preventDefault() event. preventDefault()のための方法ondragoverイベント：
event . preventDefault()
ドロップを行います - ondrop
ドラッグされたデータが削除されると、ドロップイベントが発生します。
上記の例では、 ondrop属性は、関数を呼び出すdrop(event) 。
function drop(ev) {
ev. preventDefault() ;
var data = ev.dataTransfer. getData("text") ;
ev.target. appendChild(document.getElementById(data) );
}
コードは説明しました：
- 呼び出しpreventDefault()データのブラウザのデフォルト処理を防ぐために(default is open as link on drop)
- ドラッグされたデータ取得dataTransfer. getData() dataTransfer. getData()メソッド。 この方法は、同じタイプに設定された任意のデータ戻りますsetData()メソッドを
- ドラッグされたデータは、ドラッグされた要素のIDである("drag1")
- ドラッグされた要素を追加しdrop要素
前後にドラッグ画像
ドラッグする方法(and drop) 2の間で前後の画像<div>要素。