srcmini上一章HTML5教程请查看：html5地理位置geolocation
在本教程中，你将学习如何使用HTML5拖放功能。
拖放一个元素
HTML5的拖放特性允许用户将一个元素拖放到另一个位置，放置位置可能是不同的应用程序，拖动元素时，元素的透明表示形式是跟随鼠标指针。
让我们尝试下面的例子来理解它是如何工作的：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="utf-8">
<title>使用拖放</title>
<script>
function dragStart(e) {
// 设置允许拖动源的操作
e.dataTransfer.effectAllowed = "move";
// 设置拖动数据的值和类型
e.dataTransfer.setData("Text", e.target.getAttribute("id"));
}
function dragOver(e) {
// 防止浏览器默认处理数据
e.preventDefault();
e.stopPropagation();
}
function drop(e) {
// 为其他所有人取消此事件
e.stopPropagation();
e.preventDefault();
// 按类型检索拖动的数据
var data = e.dataTransfer.getData("Text");
// 向下拉框追加图像
e.target.appendChild(document.getElementById(data));
}
</script>
<style>
#dropBox {
width: 300px;
height: 300px;
border: 5px dashed gray;
background: lightyellow;
text-align: center;
margin: 20px 0;
color: orange;
}
#dropBox img {
margin: 25px;
}
</style>
</head>
<body>
<h2>拖放演示</h2>
<p>将图像拖放到拖放框中:</p>
<div id="dropBox" ondragover="dragOver(event);" ondrop="drop(event);">
<!--删除的图像将插入这里-->
</div>
<img src="../images/kites.jpg" id="dragA" draggable="true" ondragstart="dragStart(event);" width="250" height="250" alt="放风筝">
</body>
</html>
提示：你可以通过将draggable属性设置为true来创建一个draggable元素，例如draggable=”true”。但是，在大多数web浏览器中，带有href属性的文本选择、图像和锚元素在默认情况下是可拖动的。
拖放事件
在拖放操作的各个阶段会触发许多事件，但是，像mousemove这样的鼠标事件不会在拖动操作期间触发。
下表简要概述了所有拖放事件。
| 事件 | 注释 |
| ondragstart | 当用户开始拖动元素时触发。 |
| ondragenter | 当可拖动元素首次移动到drop侦听器中时触发。 |
| ondragover | 当用户将元素拖放到drop侦听器上时触发。 |
| ondreagleave | 当用户从drop listener中拖出一个元素时触发。 |
| ondrag | 当用户拖动元素时触发;持续触发，但可以给出鼠标光标的X和Y坐标。 |
| ondrop | 当用户成功地将元素放入drop侦听器时触发。 |
| ondragend | 当拖动操作完成时触发，无论是否成功。当从桌面将文件拖动到浏览器时，不会触发此事件。 |
注意：HTML5的拖放功能在所有主要的现代浏览器中都得到了支持，比如Firefox、Chrome、Opera、Safari和Internet Explorer 9及以上。
评论前必须登录！
注册