HTML拖放 HTML拖放|HTML5

本文概述

拖放事件功能
HTML5拖放示例
拖放操作期间的阶段
支持的浏览器

HTML拖放（DnD）是HTML5的功能。它是一个功能强大的用户界面概念, 可用于在鼠标的帮助下复制, 重新排序和删除项目。你可以在元素上按住鼠标按钮并将其拖动到另一个位置。如果要将元素放在此处, 只需释放鼠标按钮。
如果要实现传统HTML4中的拖放功能, 则必须使用复杂的JavaScript编程或其他JavaScript框架（例如jQuery等）。
拖放事件功能

事件	描述
Drag	每当在拖动对象时移动鼠标时, 它将触发。
Dragstart	这是一个非常初期的阶段。当用户开始拖动对象时触发。
Dragenter	当用户将鼠标光标移到目标元素上时触发。
Dragover	当鼠标移到元素上时, 将触发此事件。
Dragleave	当鼠标离开元素时, 会触发此事件。
Drop	拖放在拖动操作结束时触发。
Dragend	当用户释放鼠标按钮以完成拖动操作时, 它将触发。

HTML5拖放示例让我们看一个HTML 5拖放功能的示例。
要理解此示例, 你必须具有JavaScript知识。

< script> function allowDrop(ev) {ev.preventDefault(); } function drag(ev) {ev.dataTransfer.setData("text/html", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = http://www.srcmini.com/ev.dataTransfer.getData("text/html"); ev.target.appendChild(document.getElementById(data)); } < /script> < p> Drag the srcmini image into the rectangle:< /p> < div id="div1" style="width:350px; height:100px; padding:10px; border:1px solid #aaaaaa; " ondrop="drop(event)" ondragover="allowDrop(event)"> < /div> < br> < img id="drag1" src="http://www.srcmini.com/htmlpages/images/srcmini.png" alt="srcmini image" draggable="true" ondragstart="drag(event)"/>

在上面的示例中, 我们在div元素上使用了ondrop和ondragover事件, 在img标签上使用了ondragstart事件。
立即测试
输出：
将srcmini图像拖到矩形中：

注意：在拖动操作过程中不会触发MouseEvent。拖放操作期间的阶段 1）使元素可拖动
如果要使元素可拖动, 请在元素上将draggable属性设置为“ true”。例如：