本文概述
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 = 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="/htmlpages/images/srcmini.png" alt="srcmini image"
draggable="true" ondragstart="drag(event)"/>在上面的示例中, 我们在div元素上使用了ondrop和ondragover事件, 在img标签上使用了ondragstart事件。
立即测试
输出：
将srcmini图像拖到矩形中：
注意：在拖动操作过程中不会触发MouseEvent。
拖放操作期间的阶段
1）使元素可拖动
如果要使元素可拖动, 请在元素上将draggable属性设置为“ true”。例如：
<img draggable = "true">2）拖动什么：
使用ondragstart和setData()方法。
指定拖动元素时应发生的情况。
3）放哪里：
使用ondragover事件。
4）做下降：
使用ondrop事件。
支持的浏览器
| Element | Chrome | IE | Firefox | Opera | Safari |
| 拖放功能 | Yes | Yes | Yes | Yes | Yes |
