HTML教程-HTML拖放

HTML拖放（Drag and Drop，简称DnD）是HTML5的一个功能。它是一个强大的用户界面概念，用于通过鼠标复制、重新排序和删除项目。你可以按住鼠标按钮在一个元素上拖动它到另一个位置。如果你想在那里放置元素，只需释放鼠标按钮。

如果你想在传统的HTML4中实现拖放功能，你必须要么使用复杂的JavaScript编程，要么使用其他JavaScript框架如jQuery等。

拖放功能的事件

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

HTML5拖放示例

让我们看一个HTML5拖放功能的示例。

要理解这个示例，您必须了解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>将javatpoint图片拖动到矩形框中：</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/javatpoint.png" alt="javatpoint图片"
    draggable="true" ondragstart="drag(event)"/>

在上面的示例中，我们在div元素上使用了ondrop和ondragover事件，以及在img标签上使用了ondragstart事件。

注意：在拖动操作期间不会触发MouseEvent。

拖放操作的阶段

1) 设置可拖动元素

如果你想使一个元素可拖动，将draggable属性设置为"true"。例如：

1. <img draggable="true">

2) 拖动的内容：

使用ondragstart和setData()方法。

指定在拖动元素时应该发生什么。

3) 放置位置：

使用ondragover事件。

4) 完成拖放：

使用ondrop事件。

支持的浏览器

元素	Chrome	IE	Firefox	Opera	Safari
拖放功能	是	是	是	是	是