拖放（Drag 和 drop） 是HTML5標(biāo)準(zhǔn)的組成成分
拖放
是一種常見的特性空猜，即抓取對(duì)象以后拖到另一個(gè)位置
在HTML5中则北，拖放是標(biāo)準(zhǔn)的一部分邢隧，任何元素都能夠拖放
HTML5拖放實(shí)例
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.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>拖動(dòng) RUNOOB.COM 圖片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>
實(shí)例解釋：
設(shè)置元素為可拖放粱坤，首先隶糕，為了使元素可拖放，把draggable屬性設(shè)置為true
<img draggable = "true">
拖動(dòng)什么-ondragstart和setData（）
然后站玄，規(guī)定當(dāng)元素被拖動(dòng)時(shí)枚驻，會(huì)發(fā)生什么
在上面是例子中，ondragstart屬性調(diào)用了一個(gè)函數(shù)株旷，drag(event),它規(guī)定被拖動(dòng)的數(shù)據(jù)
dataTransfer.setData()方法設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
在例子中再登，數(shù)據(jù)類型是Text，值是可拖動(dòng)元素的id("drag1")
放到何處-ondragover
ondragover事件規(guī)定在何處放置被拖動(dòng)的數(shù)據(jù)
默認(rèn)的晾剖，無法將數(shù)據(jù)/元素放置到其他元素中锉矢，如果需要設(shè)置允許放置，我們必須阻止對(duì)元素的默認(rèn)處理方式
這要通過調(diào)用ondragover事件的event齿尽。preventDafault()方法
event.preventDefault()
進(jìn)行放置 -ondrop
當(dāng)放置被拖數(shù)據(jù)是沽损，回訪生drop事件
在上面的例子中，ondrop屬性調(diào)用了一個(gè)函數(shù)循头，drop(event);
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
代碼解釋：
1.調(diào)用preventDefault()來避免瀏覽器對(duì)數(shù)據(jù)的默認(rèn)處理（drop事件的默認(rèn)行為是以鏈接形式打來）
2.通過dataTransfer.getData("Text") 方法獲取的被拖得數(shù)據(jù)绵估，該方法將返回在setData()方法中設(shè)置為相同類型的任何數(shù)據(jù)
3.被拖數(shù)據(jù)是被拖元素的id("drag1")
4.把杯托元素追加到放置與元素（目標(biāo)元素）中
