Dragula 不适用于触摸设备

Question

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

我在 componentDidMount 函数中得到以下代码行：

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

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

我已将视口规则添加到 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

嗯...看起来阻止 window 滚动可以解决这个问题。如果您不关心附加到 touchmove 的函数，那么这可以解决问题：

window.addEventListener('touchmove', function() {})

Answer 2

JavaScript解法：

使用拖动手柄

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

阻止拖动手柄上的默认事件

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

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

CSS解法：

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

Dragula 不适用于触摸设备

Dragula not working on touch devices

javascript

dragula