现在拖动元素， ondragstart 中的代码就会执行，样式改变了，但释放拖动元素后，什么事情都没发生。接下来我们将视线转移到 dropzone 上来。

设置元素为可放置的

ondragstart 之后，下一个要写的处理函数就是 ondragover 了。上面讲过，放置行为默认是被浏览器阻止的，我们需要取消这个默认行为，双重否定为肯定，对吧？

function onDragOver(event) {
 event.preventDefault();
}

在阻止浏览器干扰后，现在就能将拖动元素添加到 dropzone 了，dropzone 成为能够接受任何拖动元素的容器元素。

 
   draggable
 

 
  dropzone
 

即便现在 dropzone 可以接受拖动元素，释放鼠标后还是看不见改变发生。

放置的时候要做什么？

现在要介绍第三个也是最后一个处理函数 ondrop 。

我们的函数逻辑遵循以下步骤：

• 还记得在 setData 中设置的数据吗？
• 现在我们需要从 dataTransfer 对象的 getData 属性中获取设置的数据，数据内容是拖动元素的 ID，它会返回给我们。
• 使用上一步获取的 ID，获得拖动元素。 获取 dropzone 元素。
• 将拖拽元素 append 到 dropzone 中。
• 清理 dataTransfer 对象中保存的数据。

function onDrop(event) {
 const id = event
  .dataTransfer
  .getData('text');

 const draggableElement = document.getElementById(id);
 const dropzone = event.target;
 
 dropzone.appendChild(draggableElement);

 event
  .dataTransfer
  .clearData();
}

因为这是我们要写的第三个也是最后一个函数，我们只要将它传递给 dropzone 的 ondrop 属性，就完成了一个完整的拖放功能！

 
   draggable
 

 
   dropzone
 

这里写的示例是最基本的，它展示如何使页面上的任何内容可变得可拖动。当然，一个网页里可以同时包含多个可拖动元素、多个 dropzone，或者使用文本没有介绍的其他事件做更加细粒度的自定义设置。

下面展示的是本文一开始提到的那个简单的待办事项列表功能。:fire:

只要依据本文上面已经讲过的内容，稍微变通一下，就能写出来。只要确保这里可拖动待办项目的 ID 是唯一的就行了。

总结

以上所述是小编给大家介绍的基于JavaScript 实现拖放功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！