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">

我甚至尝试为CSS添加一些应该可拖动的html元素的触摸规则（因此禁用了文本选择）：

-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解决方案：

使用拖动手柄

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;。

Answer 2

嗯...看起来像防止窗户滚动来修复这个伎俩。如果您不关心将功能附加到touchmove，那么这可以解决问题：

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

Dragula不在触摸设备上工作

2 个答案: