1、HTML5拖放
拖放（Drag和drop）是HTML5標准的組成部分。
2、拖動開始：
ondragstart：調用了一個函數，drag（event），它規定了被拖動的數據
3、設置拖動數據
setData（）：設置被拖數據的數據類型和值。
4、放入位置：
ondragover：事件規定在何處放置被拖動的數據。
5、放置：
ondrop:當放置被拖放數據時，會發生drop事件
總結：
在拖動目標上觸發事件（源元素）：
ondragstart:用戶開始拖動元素時觸發
ondrag:元素正在拖動時觸發
ondragend:用戶完成元素拖動後觸發
釋放目標時觸發的事件
ondragenter:當被鼠標拖動的對象進入其容器范圍內時觸發此事件
ondragover:當某被拖動的對象在另一對象容器范圍內拖動時觸發此事件
ondragleave:當被鼠標拖動的對象離開其容器范圍內時觸發此事件
ondrop:在一個拖動過程中，釋放鼠標鍵時觸發此事件
一個拖放的示例：
http://hovertree.com/texiao/html5/44/
可以拖動圖片放到綠色或者藍色區域裡面。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML5拖放之drop-何問起</title><base target="_blank" />
<style>
.box{
width: 300px;
height: 300px;
}
#hovertreebox{
float: left;
background-color:darkgreen;
}
#keleyibox{
float: left;
background-color:darkblue;
}
#msg{clear:both;}a{color:blue;}
</style>
<script>
var hovertreeboxDiv, msgDiv, hovertreepic1, keleyiboxDiv;
window.onload = function () {
hovertreeboxDiv = document.getElementById("hovertreebox");
msgDiv = document.getElementById("msg");
hovertreepic1 = document.getElementById("hovertreepic");
keleyiboxDiv = document.getElementById("keleyibox");
hovertreeboxDiv.ondragover = function (e) {
e.preventDefault();
}
keleyiboxDiv.ondragover = function (e) {
e.preventDefault();
}
hovertreepic1.ondragstart = function (e) {
e.dataTransfer.setData("imgId", "hovertreepic");
}
hovertreeboxDiv.ondrop = dropImghandler;
keleyiboxDiv.ondrop = dropImghandler;
function dropImghandler(e) {
//創建節點
var img = document.getElementById(e.dataTransfer.getData("imgId"));
e.target.appendChild(img);
}
}
function showObj(obj) {
var s = "";
for(var k in obj){
s+=k+":"+obj[k]+"<br/>";
}
msgDiv.innerHTML = s;
}
</script>
</head>
<body>
<div id="hovertreebox" class="box"></div>
<div id="keleyibox" class="box"></div>
<img id="hovertreepic" src="http://hovertree.com/hvtimg/bjafjd/xusm0re6_l.jpg" alt="">
<div id="msg"></div>
<div style="max-width:960px;">可以拖動圖片放到綠色或者藍色區域裡面。<a href="http://hovertree.com">首頁</a> <a href="http://hovertree.com/h/bjag/j1jhbtmp.htm">說明</a>
</div>
</body>
</html>
練習題：
http://hovertree.com/tiku/bjag/xuo4y2bk.htm