拖放是HTML5標準的一部分。
拖動圖像上方插入到矩形。
在HTML
HTML5的工作草案規範包括拖放支持。 HTML5支持不同類型的拖放功能，包括：
- 拖放文本和HTML代碼
- 拖放HTML元素
- 拖放文件
根據需要採取行動，在上述類型之一都可以使用。 注意，當一個HTML元素被拖動，用於移動其當前位置，其ID被發送到目的地父元素; 所以它發送的文本和可視為第一組。
谷歌的基於Web的電子郵件應用程序的Gmail支持最新的谷歌Chrome瀏覽器和蘋果的Safari（5.x的）圖像和附件的拖和下降。 而谷歌圖片搜索支持拖放。
拖放
拖放是一個非常普遍的特徵。 這是當你"grab"的對象，並將其拖動到不同的位置。
在HTML5，拖放是標準的一部分，任何元素可以是拖動。
瀏覽器支持
在表中的數字規定，完全支持拖放第一個瀏覽器版本。
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4 | 9 | 3.5 | 6 | 12.0 |
HTML拖放實施例
下面的例子是一個簡單的拖放例如：
例
<!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> 試一試» 這似乎很複雜，但讓我們去通過拖放事件的所有不同部分。
做一個可拖動的元素
首先：為了使元素可拖動，設定的draggable屬性為true ：
<img draggable="true">
什麼拖動- ondragstart和setData()
然後，指定的元素是被拖動的時候會發生什麼。
在上面的例子中， ondragstart屬性調用一個函數， drag(event) ，它指定什麼被拖動數據。
該dataTransfer. setData() dataTransfer. setData()方法將數據類型和拖動的數據的值：
function drag(ev) {
ev.dataTransfer. setData("text", ev.target.id) ;
}
在這種情況下，數據類型是"text"和值是可拖動元素的id ("drag1")
哪裡掉下- ondragover
該ondragover事件指定了拖動的數據可以被丟棄。
默認情況下，數據/元素不能被其他元素下降。 要允許降，一定要防止元素的默認處理。
這是通過調用完成event. preventDefault() event. preventDefault()用於方法ondragover事件：
event . preventDefault()
不要投遞 - ondrop
當拖動的數據被刪除，出現下降的事件。
在上面的例子中， ondrop屬性調用一個函數， drop(event) ：
function drop(ev) {
ev. preventDefault() ;
var data = ev.dataTransfer. getData("text") ;
ev.target. appendChild(document.getElementById(data) );
}
代碼解釋：
- 調用preventDefault()來防止數據的瀏覽器默認處理(default is open as link on drop)
- 獲取與拖動的數據dataTransfer. getData() dataTransfer. getData()方法。 此方法將返回被設置為相同的類型中的任何數據setData()方法
- 拖動的數據是被拖動的元素的id ("drag1")
- 追加拖動的元素進入drop元素
拖動圖像來回
如何拖動(and drop)的圖像背面和兩個之間來回<div>元素。