javascript - 拖放的拖动事件与鼠标事件

Question

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

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

我目前正在研究Vanilla JS

我仍在努力寻找答案 -

1. 为什么使用mouse事件而不是drag事件？是不是有一些可以使用mouse事件完成的事情不能使用drag事件完成？

2. 如果是这种情况，什么情况会导致使用拖动不起作用？或者使用鼠标事件不起作用？

3. 如何选择以哪种方式实现拖放功能？这两种方法各有利弊吗？

4. 还有其他方法吗？ (我的意思是除了鼠标事件和拖动事件)

Answer 1

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

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

例如，您无法使用 jquery Draggable API 等内容执行上述任何操作。如果你想在页面上移动一个元素，那么 jquery 可拖动方法更容易实现，拖放 API 会“幽灵”拖动的元素，例如，如果它是绝对定位的，你只需更新它在鼠标上的坐标移动等。

这是一个sortable list通过 HTML5 拖放实现，几年前我就使用过这个东西。

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

希望这有帮助。