拖放是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>元素。