Dragula not working on touch devices

Question

I'm probably missing something obvious but I can't get Dragula to work on any iOS browser. I'm not doing anything special and the docs and issues on Github don't seem to offer any insight for debugging.

I've got the following line of code in a componentDidMount function:

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

Nothing special about those elements, just 2 <ul>s.

I've added a viewport rule to my HTML:

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

I've even tried adding some touch rules to the CSS for the html elements that should be draggable (so text selection is disabled):

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

I've managed to replicate the issue on mac's iOS simulator. When I try to drag, it scrolls the page around instead of activating the dnd function.

Note that everything works fine on desktop.

What do?

Answer 1

JavaScript solution:

1. Use a drag handle

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

2. Prevent the default event on the drag handle

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

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

CSS solution:

Use touch-action: none; on the drag handle if you don't need Mobile Safari support.

Answer 2

Hmmm... looks like preventing the window from scrolling around fixes the trick. If you don't care about having functions attached to touchmove then this fixes the issue:

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