html5拖放元素 – HTML5教程 html5拖放元素|HTML

上一章HTML5教程请查看：html5地理位置geolocation
在本教程中，你将学习如何使用HTML5拖放功能。
拖放一个元素HTML5的拖放特性允许用户将一个元素拖放到另一个位置，放置位置可能是不同的应用程序，拖动元素时，元素的透明表示形式是跟随鼠标指针。
【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 = http://www.srcmini.com/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="http://www.srcmini.com/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	当拖动操作完成时触发，无论是否成功。当从桌面将文件拖动到浏览器时，不会触发此事件。