javascript - 检测鼠标单击、移动和释放(也称为拖动)，而无需在 html5 中拖动对象

Question

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

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

Answer 1

要在手机上使用该功能，您需要一个“touch 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 的触摸补丁，如下所示: https://1stwebdesigner.com/chart-js-library/