HTML5 拖放
請把 365jz 圖片拖到矩形中。
拖放
拖放（Drag 和 Drop）是很常見的特性。它指的是您抓取某物并拖入不同的位置。
拖放是 HTML5 標(biāo)準(zhǔn)的組成部分：任何元素都是可拖放的。
瀏覽器支持
表格中的數(shù)字指示了完全支持拖放的首個瀏覽器版本。
| API | |||||
| 拖放 | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
HTML 拖放實(shí)例
下列是關(guān)于拖放的簡單例子：
實(shí)例
<!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>
它也許看上去有點(diǎn)復(fù)雜，不過讓我們研究一下拖放事件的所有不同部分。
把元素設(shè)置為可拖放
首先：為了把一個元素設(shè)置為可拖放，請把 draggable 屬性設(shè)置為 true：
<img draggable="true">
拖放的內(nèi)容 - ondragstart 和 setData()
然后，規(guī)定當(dāng)元素被拖動時發(fā)生的事情。
在上面的例子中，ondragstart 屬性調(diào)用了一個 drag(event) 函數(shù)，規(guī)定拖動什么數(shù)據(jù)。
dataTransfer.setData() 方法設(shè)置被拖動數(shù)據(jù)的數(shù)據(jù)類型和值：
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
在本例中，數(shù)據(jù)類型是 "text"，而值是這個可拖動元素的 id ("drag1")。
拖到何處 - ondragover
ondragover 事件規(guī)定被拖動的數(shù)據(jù)能夠被放置到何處。
默認(rèn)地，數(shù)據(jù)/元素?zé)o法被放置到其他元素中。為了實(shí)現(xiàn)拖放，我們必須阻止元素的這種默認(rèn)的處理方式。
這個任務(wù)由 ondragover 事件的 event.preventDefault() 方法完成：
event.preventDefault()
進(jìn)行放置 - ondrop
當(dāng)放開被拖數(shù)據(jù)時，會發(fā)生 drop 事件。
在上面的例子中，ondrop 屬性調(diào)用了一個函數(shù)，drop(event)：
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
代碼解釋：
- 調(diào)用 preventDefault() 來阻止數(shù)據(jù)的瀏覽器默認(rèn)處理方式（drop 事件的默認(rèn)行為是以鏈接形式打開）
- 通過 dataTransfer.getData() 方法獲得被拖的數(shù)據(jù)。該方法將返回在 setData() 方法中設(shè)置為相同類型的任何數(shù)據(jù)
- 被拖數(shù)據(jù)是被拖元素的 id ("drag1")
- 把被拖元素追加到放置元素中
如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會為你解答！！ 點(diǎn)擊進(jìn)入論壇
您可能感興趣的文章:
- 上一篇：HTML5 地理定位
- 下一篇：HTML 本地存儲
