html 5ドラッグ＆ドロップ

要素をドラッグ＆ドロップ可能に設定
まず、要素をドラッグ可能にするためにdraggableプロパティをtrueに設定します.
何をドラッグしますか-ondragstartとsetData()
dataTransfer.setData()メソッドは、ドラッグされたデータのデータ型と値を設定します.

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

どこに置くか-ondragover
ondragoverイベントは、ドラッグされたデータをどこに配置するかを規定します.
デフォルトでは、データ/要素は他の要素に配置できません.配置を許可する設定が必要な場合は、要素のデフォルトの処理を阻止する必要があります.
これはondragoverイベントのeventを呼び出すことによって行われます.preventDefault()メソッド:
配置を行う-ondrop
ドラッグされたデータを配置するとdropイベントが発生します.
ondropプロパティは、関数を呼び出します.drop(event):

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

コードの説明:

preventDefault()を呼び出し、ブラウザによるデータのデフォルト処理(dropイベントのデフォルト動作はリンク形式で開く)

を回避する.

dataTransferを通過する.getData(「Text」)メソッドは、ドラッグされたデータを取得します.このメソッドは、setData()メソッドで同じタイプに設定されているデータを返します.

被ドラッグデータは被ドラッグ要素のid(「drag 1」)

である.

被ドラッグ要素を配置要素(ターゲット要素)の

に追加する.
例リンク:http://www.w3school.com.cn/tiy/t.asp?f=html5_draganddrop2