HTML拖放

本文概述

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

HTML拖放（DnD）是HTML5的功能。它是一个功能强大的用户界面概念, 可用于在鼠标的帮助下复制, 重新排序和删除项目。你可以在元素上按住鼠标按钮并将其拖动到另一个位置。如果要将元素放在此处, 只需释放鼠标按钮。

如果要实现传统HTML4中的拖放功能, 则必须使用复杂的JavaScript编程或其他JavaScript框架（例如jQuery等）。

拖放事件功能

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事件。

支持的浏览器