在触摸设备上使用拖动手柄在 JS 中进行拖放

发布于 2025-01-16 23:56:51 字数 243 浏览 0 评论 0原文

我正在尝试使用 vanilla JS 创建一个拖放应用程序。

Example:  https://codepen.io/dever52/pen/MWrJxrL

然而，这仅适用于鼠标。所以我无法在触摸设备上拖动元素。

我尝试使用 ontouchstart 和 ontouchend 事件以便能够在触摸设备上使用它，但这不起作用（请参阅 codepen 中的注释）。有没有办法让它适用于触摸设备？

原文

I'm trying to create a drag-and-drop application using vanilla JS.

Example:  https://codepen.io/dever52/pen/MWrJxrL

However, this only works with a mouse. So i can't drag the element on a touch-device.

I've tried using the ontouchstart and ontouchend event to be able to use it on touch devices, but this doesn't work (see comments in the codepen) as expected.
Is there a way how to make this work for touch devices?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

森林迷了鹿 2025-01-23 23:56:51

也许这个答案可以帮助你-> html5 移动拖放

大多数移动设备不会侦听拖动事件绑定到 DOM。我建议使用 touchmove 事件以及与之相关的事件。它看起来像：

我认为这些事件监听器可以帮助你

  var el = document.getElementById('drag');

  el.addEventListener("touchstart", handleStart, false);
  el.addEventListener("touchend", handleEnd, false);
  el.addEventListener("touchcancel", handleCancel, false);
  el.addEventListener("touchleave", handleEnd, false);
  el.addEventListener("touchmove", handleMove, false);

Maybe this answer can help you -> html5 drag and drop FOR MOBILE

Most mobile devices do not listen to the drag events that are bound to the DOM. I would recommend using the touchmove event and the events that go along with with it. It would look something like:

I think these event listeners can help you

  var el = document.getElementById('drag');

  el.addEventListener("touchstart", handleStart, false);
  el.addEventListener("touchend", handleEnd, false);
  el.addEventListener("touchcancel", handleCancel, false);
  el.addEventListener("touchleave", handleEnd, false);
  el.addEventListener("touchmove", handleMove, false);

回复收藏 0 原文

~没有更多了~