Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted

Question

Full error:

Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
preventDefault  @   jquery-2.2.4.min.js:3
f               @   jquery.ui.touch-punch.min.js:14
b._touchMove    @   jquery.ui.touch-punch.min.js:26
f               @   jquery-2.2.4.min.js:2
dispatch        @   jquery-2.2.4.min.js:3
r.handle        @   jquery-2.2.4.min.js:3

I'm using touchpunch, which may be complicating the issue? I have tried adding cancel: false to the draggable options, as most solutions for this error suggest. It did not help.

This is being thrown constantly on drag, 30-80 times.

Here is all the dragging related code:

var t;
$(document).on('touchstart','.menu-item', function (event) {
    selectItem(this);
    var self = this;
    if ($(self).hasClass('draggable')) return;
    t = setTimeout(function () {
        $(self).draggable({
            revert: 'invalid',
            helper: 'clone',
            opacity: .75,
            cancel: false,
            appendTo: 'body',
            cursorAt: {
                left: 100,
                top: 100
            },
            start: function(e, ui)
            {
                $(ui.helper).addClass("ui-draggable-helper");
                $('.menu-container').addClass('stop-scrolling');
            },
            stop: function(e, ui) {
                $('.menu-container').removeClass('stop-scrolling');
            }
        }).draggable('enable').addClass('draggable');
        $(self).trigger(event)
    }, 800);
});

$(document).on("touchend", function () {
    clearTimeout(t);
    $('.draggable:not(.ui-draggable-helper)').draggable( 'disable' ).removeClass('draggable');
});

Answer 1

I had the same problem, I fixed it by adding an if statement in jquery.ui.touch-punch.js:

Here is the original code (starts at line 31):

function simulateMouseEvent (event, simulatedType) {

  // Ignore multi-touch events
  if (event.originalEvent.touches.length > 1) {
    return;
  }

  event.preventDefault();

And here is the updated code:

function simulateMouseEvent (event, simulatedType) {

  // Ignore multi-touch events
  if (event.originalEvent.touches.length > 1) {
    return;
  }

  if(event.cancelable) {
    event.preventDefault();
  }