HTML5のドラッグ＆ドロップ
ドラッグアンドドロップ（ドラッグ＆ドロップ）は、HTML5標準の一部です。
W3cschoolアイコンや四角形にドラッグします。
ドラッグ・アンド・ドロップ
ドラッグ＆ドロップは、オブジェクトの後に別の場所にクロールすることで共通の機能です。
HTML5では、ドラッグアンドドロップドラッグアンドドロップすることができます任意の要素の標準的な部分です。
ブラウザのサポート
Internet Explorerの9+、Firefoxの、オペラ、クロム、およびSafariのサポートドラッグ。
注：サファリ5.1.2は、ドラッグをサポートしていません。
HTML5のドラッグ＆ドロップの例
次の例は、単純なドラッグアンドドロップの例です：
例
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<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>
<p>拖动 W3CSchool.cc 图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>
»をお試しください
それは少し複雑に見えるかもしれませんが、我々は、ドラッグのさまざまな部分を研究し、イベントをドロップすることができました。
要素をドロップするように設定されています
まず、要素はドラッグ可能にするために、trueにdraggable属性を設定します。
ondragstartメソッドとsetData（） - 何をドラッグします
要素が規定をドラッグしたときに、何が起こるのだろう。
上記の例では、ondragstart属性は、ドラッグされているデータを定義する機能、ドラッグ（イベント）を呼び出します。
データ型と値曳航データを設定するdataTransfer.setData（）メソッド：
{
ev.dataTransfer.setData("Text",ev.target.id);
}
この例では、データタイプが「テキスト」であり、値はドラッグ可能要素のID（ "drag1」）です。
どこに置くか - は、OnDblClick
ドラッグされているデータを配置する場所を指定されたイベントは、OnDblClick。
デフォルトでは、あなたが他の要素にデータ/要素を配置することはできません。 あなたが配置することができます設定する必要がある場合、我々は、要素のデフォルト処理を防止しなければなりません。
イベントevent.preventDefault（）メソッドを呼び出すことは、OnDblClickことによってこれを行います。
置かれる - ondrop
ドラッグされたデータを置いたときに、イベントが発生するドロップします。
上記の例では、ondrop属性は、（イベント）をドロップし、関数を呼び出します。
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
コードの説明：
- （ドロップイベントのデフォルトの動作は、リンクを開くことです）、データ処理のためのデフォルトのブラウザを防ぐためには、preventDefault（）を呼び出し
- dataTransfer.getData（ "テキスト"）メソッドを使用して、ドラッグしたデータを取得します。 このメソッドは、のsetData（）メソッド内の任意の型の同じデータセットを返します。
- データが曳航要素IDを牽引される（「drag1」）
- 場所要素（対象要素）内に追加ドラッグされた要素
より多くの例
前後に画像をドラッグ＆ドロップ
2の<div>要素の間の画像をドラッグ＆ドロップする方法。