HTML5 拖放功能
在本教程中，您将学习如何使用 HTML5 拖放功能。
拖放元素
HTML5 拖放功能允许用户将元素拖放到另一个位置。 放置位置可能是不同的应用程序。 拖动元素时，该元素的半透明表示跟随鼠标指针。
让我们试试下面的例子来了解它的基本工作原理：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Using Drag and Drop</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) {
// Cancel this event for everyone else
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>Drag and Drop Demo</h2>
<p>Drag and drop the image into the drop box:</p>
<div id="dropBox" ondragover="dragOver(event);" ondrop="drop(event);">
<!--Dropped image will be inserted here-->
</div>
<img src="../images/kites.jpg" id="dragA" draggable="true" ondragstart="dragStart(event);" width="250" height="250" alt="Flying Kites">
</body>
</html>提示：您可以通过将 draggable 属性设置为 true 来使元素可拖动，例如 draggable="true"。 但是，在大多数 Web 浏览器中，文本选择、图像和具有 href 属性的锚元素默认情况下是可拖动的。
拖放事件
在拖放操作的各个阶段会触发许多事件。 但是在拖动操作期间不会触发诸如 mousemove 之类的鼠标事件。
下表为您提供了所有拖放事件的简要概述。
| 事件 | 说明 |
|---|---|
ondragstart |
当用户开始拖动元素时触发。 |
ondragenter |
当可拖动元素第一次移动到放置侦听器时触发。 |
ondragover |
当用户将元素拖到放置侦听器上时触发。 |
ondragleave |
当用户将元素拖出放置侦听器时触发。 |
ondrag |
当用户将元素拖动到任何地方时触发； 不断触发，但可以给出鼠标光标的 X 和 Y 坐标。 |
ondrop |
当用户成功将元素放入放置侦听器时触发。 |
ondragend |
拖动操作完成时触发，无论是否成功。 当从桌面拖动文件到浏览器时，这个 event 被 not 触发。 |
注意： HTML5 的拖放功能在所有主流现代浏览器（如 Firefox、Chrome、Opera、Safari 和 Internet Explorer 9 及更高版本）中均受支持。
Advertisements