拖放事件与鼠标事件答案

【问题标题】：Drag Event vs Mouse events for Drag and Drop拖放事件与鼠标事件
【发布时间】：2020-05-10 04:32:30
【问题描述】：

最近我开始学习Drag and Drop API，并且正在通过Youtube上的一些教程以this开始，这非常好，了解了整个Drag Cycle。

但我看到一些other tutorials 没有使用drag，但拖动功能是使用mouseup、mousedown、mousemove 事件创建的。

我目前正在研究Vanilla JS

我还在努力寻找答案——

【问题讨论】：

【解决方案1】：

我不确定为什么您的问题获得了两次接近投票？我认为这是一个足够合理的问题，有一个 HTML 拖放 API，但大多数实现都使用鼠标事件和绝对定位。您总是可以告诉这一点，因为它们将拖动限制在您开始拖动的浏览器页面。

HTML5 Drag and Drop 允许您在浏览器“外部”拖动并与其他应用程序交互。例如，您可以在浏览器选项卡之间拖放，也可以从文字处理器中拖放数据，然后使用拖放 API 将其拖放到您的 Web 应用程序中。您还可以从 Web 应用程序中拖放内容并将其拖放到本机应用程序中。

例如，您不能使用 jquery 可拖动 API 之类的东西来执行上述任何操作。如果你想在页面上移动一个元素，那么 jquery 可拖动方法更容易实现，例如拖放 API 将“重影”拖动的元素，而如果它是绝对定位的，你可以在鼠标上更新它的坐标移动等。

这是一个sortable list，使用 HTML5 拖放实现，来自几年前我使用这些东西。

我的建议是 - 如果您想在同一页面中移动元素，即重新定位内容，或者您不需要在浏览器选项卡之间拖动或接受来自其他应用程序的数据，HTML 5 DnD 可能会令人沮丧和。

希望这会有所帮助。

【讨论】：

哇，谢谢伍迪，这很有帮助。我想将 dragndrop 用于 React 中的个人项目，并从 Vanilla JS 中此功能的基本内容开始。试图了解这方面的来龙去脉。