javascript - Dragula 不适用于触摸设备

Question

我可能遗漏了一些明显的东西，但我无法让 Dragula 在任何 iOS 浏览器上工作。我没有做任何特别的事情，Github 上的文档和问题似乎没有提供任何调试见解。

我在 componentDidMount 中有以下代码行功能:

dragula([document.querySelector('#left'), document.querySelector('#right')])

这些元素没有什么特别的，只是 2 <ul> s。

我已将视口(viewport)规则添加到 HTML:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">

我什至尝试为应该可拖动的 html 元素添加一些触摸规则到 CSS(因此禁用文本选择):

-webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;

我已成功在 Mac 的 iOS 模拟器上复制了该问题。当我尝试拖动时，它会滚动页面而不是激活 dnd 功能。

请注意，在桌面上一切正常。

做什么？

Answer 1

JavaScript 解决方案:

1. 使用拖动 handle

moves: (element, container, handle) =>
{
    return handle.classList.contains('drag-handle-class');
}

阻止拖动 handle 上的默认事件

const moveList = document.querySelectorAll('div.drag-handle-class');

if (moveList)
{
    moveList.forEach(move =>
    {
        move.addEventListener('touchmove', event => event.preventDefault());
    });
}

CSS解决方案:

如果您不需要 Mobile Safari 支持，请在拖动 handle 上使用 touch-action: none;。