介绍

HTML拖放API依赖于文档对象模型来获取有关所拖放内容的信息。结果，它允许我们拖放网页上的任何元素，并且几乎所有主流浏览器都支持它。使用JavaScript事件处理程序，我们可以将任何元素变成可拖动的项目或可以放置元素的项目。

在本文中，我们将学习如何使用HTML拖放API。让我们开始吧。

在我们开始解释该API之前，我们先来看一下这个案例，截图如下：

如果你想看完整代码的话，可以到Codepen上看，

代码地址：https://codepen.io/MehdiAoussiad/pen/bGwOwyb

这个案例是通过使用HTML拖放API来完成的。看起来似乎很复杂，现在，我们开始研究制作此示例的所有部分。

让我们开始吧。

让我们从HTML开始。

在HTML结构中，我们将创建三个div：一个可拖动div和两个div，我们将在其中拖放可拖动的div。

可拖动的div必须将draggable属性设置为true。然后，我们将添加一些HTML拖放事件属性，以便在JavaScript中进行处理。

这是HTML示例代码：

Drag and Drop the violet rectangle in other rectangles.
    
    
    

接着，我们继续设置CSS。

因此，现在，我们将使用CSS设置元素样式。你可以阅读下面的代码以查看我们的样式表。

CSS代码如下：

*{ margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif;}body{ display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100Vh;}p{ margin: 10px;}#dropHere{ width: 300px; height: 80px; border: 1px solid black; display: flex; align-items: center; justify-content: center;}#div{ background: blueviolet; width: 280px; height: 70px; cursor: grabbing; cursor: -webkit-grabbing; cursor: -moz-grabbing;}

最终输出效果：

最后，是JavaScript部分。

使用JavaScript，我们将通过创建函数来处理在HTML中添加的拖放事件属性。

这是JavaScript代码：

function allowDrop(ev) {  ev.preventDefault();}function drag(ev) {  ev.dataTransfer.setData("text", ev.target.id);}function drop(ev) {  ev.preventDefault();  var data = ev.dataTransfer.getData("text");  ev.target.appendChild(document.getElementById(data));}

之后，你将能够在其他两个矩形div之间拖放紫色div。现在让我详细解释所有这些：

1、在HTML中，我们必须为violet div指定一个draggable属性设置true，以使其成为可拖动元素。

2、ondragstartdraggable元素中的属性调用一个函数drag（event），该函数指定要拖动的数据。该dataTransfer.setData()方法设置数据类型和拖动数据的值。

function drag(ev) {  ev.dataTransfer.setData("text", ev.target.id);}

3、对于其他两个放置紫色矩形的div，事件ondragover 指定可以在何处放置拖动的数据。因为默认情况下，不能将元素拖放到其他元素中。为了允许删除，我们event.preventDefault()在函数中调用方法allowDrop。

4、现在我们只需要删除即可。当拖放的数据被放置时，发生放置事件。这是通过ondrop调用函数drop（event）的属性完成的：

function drop(ev) {  ev.preventDefault();  var data = ev.dataTransfer.getData("text");  ev.target.appendChild(document.getElementById(data));}

到这里，我们进行调用preventDefault以防止浏览器对数据进行默认处理（默认情况下是作为下拉菜单中的链接打开的）。

我们使用方法获得拖动的数据dataTransfer.getData。此方法将返回该方法中设置为相同类型的所有数据setData()。

所拖动的数据是所拖动元素的ID（“ div”）。

最后，我们将拖动的元素附加到drop元素中。

结论

拖放API是每个Web开发人员都必须了解的事情。除了拖放以外，它还提供了多个其他选项来自定义你的操作。我建议你从其他资源中了解更多有关它的信息。

感谢你阅读本文，希望它对你有用。

学习更多技能

请点击下方web前端开发