Dragula在觸摸設備上不起作用

Question

我可能缺少明顯的東西，但是我無法讓Dragula在任何iOS瀏覽器上運行。 我沒有做任何特別的事情，Github上的文檔和問題似乎也沒有提供任何調試方面的見識。

我在componentDidMount函數中有以下代碼行：

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

這些元素沒什么特別的，僅2個<ul> 。

我在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解決方案：

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; 如果不需要Mobile Safari支持，請在拖動手柄上單擊。

Answer 2

嗯...看起來像防止窗口滾動來解決問題。 如果您不希望將功能附加到touchmove則可以解決此問題：

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