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

问题描述 投票:0回答:1

我正在用HTML5编写一个简单的时间表应用程序。我希望用户能够通过在div内单击来输入事件(例如Concert,Lectures等),然后拖动并释放鼠标以控制事件的持续时间(类似于Mac OS中的日历应用程序) 。然后,我将代表事件的适当高度的另一个div插入第一个div中。我通过侦听mousedown,mousemove和mouseup事件来完成此任务。拖放不是一种选择,因为没有节点被拖动。但是,我的解决方案不适用于移动设备。我试图使用ondragstart,ondrag和ondragend实现相同的功能,但是我什至没有设法在firefox中触发ondrag和ondragend。我该怎么做才能在移动设备上完成这项工作?

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

javascript html drag-and-drop drag
1个回答
0
投票

要在手机上进行这项工作,您需要一个“触摸api”

https://developer.mozilla.org/en-US/docs/Web/API/Touch

如果您使用的是jQuery,那么它的拖放操作会有很多补丁,但是如果您使用的是Javascript,则您需要使用其他触摸API来弥补原始JavaScript的缺点,并且不要将其放置在css设置为绝对。

这里可能已经回答:HTML Drag And Drop On Mobile Devices

在此处进一步扩展:https://medium.com/@deepakkadarivel/drag-and-drop-dnd-for-mobile-browsers-fc9bcd1ad3c5

其中:https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

已将其添加到工作中:https://developer.mozilla.org/en-US/docs/Web/API/Touch

© www.soinside.com 2019 - 2024. All rights reserved.