HTML 拖放

HTML 拖放 (DnD) 是 HTML5 的一项功能。它是一个强大的用户界面概念，*用于通过鼠标复制、重新排序和删除项目*。您可以按住鼠标按钮在一个元素上，然后将其拖动到另一个位置。如果要在此处放置该元素，只需释放鼠标按钮即可。

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

拖放功能的事件

HTML5 拖放示例

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

要理解此示例，您必须了解 JavaScript。

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

输出

将 javatpoint 图片拖到矩形中

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

拖放操作期间的阶段

1) 使元素可拖动

如果要使元素可拖动，请在元素上将 draggable 属性设置为“true”。例如

2) 拖动什么

使用 ondragstart 和 setData() 方法。

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

3) 放置位置

使用 ondragover 事件。

4) 执行放置

使用 ondrop 事件。

支持的浏览器

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