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

javascript解决方案：

1. 使用拖动句柄

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

2. 防止拖动句柄上的默认事件

const moveList = document.querySelectorAll('div.drag-handle-class');
if (moveList)
{
    moveList.forEach(move =>
    {
        move.addEventListener('touchmove', event => event.preventDefault());
    });
}

CSS解决方案：

如果您不需要移动野生动物园支持，请在拖动手柄上使用touch-action: none;。

Answer 2

hmmm ...看起来像防止窗口滚动可以解决窍门。如果您不关心将功能附加到touchmove，则可以解决此问题：

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