无需在 html5 中拖动对象即可检测鼠标单击、移动和释放（也称为拖动）答案

【问题标题】：Detecting mouse click, move, and release (aka drag) without having to drag an object in html5无需在 html5 中拖动对象即可检测鼠标单击、移动和释放（也称为拖动）
【发布时间】：2020-02-13 07:06:38
【问题描述】：

我正在用 HTML5 编写一个简单的时间表应用程序。我希望用户能够输入事件（如音乐会、讲座等），通过在 div 内单击，然后拖动并释放鼠标来控制事件的持续时间（类似于 mac os 中的日历应用程序） .然后我将另一个表示事件的适当高度的 div 插入到第一个 div 中。我通过监听 mousedown、mousemove 和 mouseup 事件来实现这一点。拖放不是一个选项，因为没有节点被拖动。但是，我的解决方案不适用于移动设备。我尝试使用 ondragstart、ondrag 和 ondragend 实现相同的功能，但我什至没有设法让 ondrag 和 ondragend 在 Firefox 中触发。我该怎么做才能在移动设备上进行这项工作？

TL;DR：如何在移动设备上捕获没有可拖动对象或拖放区的鼠标拖动？

【问题讨论】：

标签： javascript html drag-and-drop drag

【解决方案1】：

要在手机上进行这项工作，您需要一个“触摸 API” https://developer.mozilla.org/en-US/docs/Web/API/Touch

添加到您已经使用的拖放 API： https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

这里有详细的解释： https://medium.com/@deepakkadarivel/drag-and-drop-dnd-for-mobile-browsers-fc9bcd1ad3c5

如果你使用 jquery，这里有一个用于拖放 api 的 toutch 补丁： https://1stwebdesigner.com/chart-js-library/

【讨论】：