JQuery UI Draggable on long press works with mousedown but not touchstart

Question

The following works fine on desktop (mousedown) but if you try it on mobile (touchstart) it doesn't drag.

var t;
$(document).on('touchstart mousedown','.menu-item', function (event) {
  var self = this;
  if ($(self).hasClass('draggable')) return;
  t = setTimeout(function () {
    $(self).draggable({
      revert: true,
      appendTo: 'body'
    }).draggable('enable').addClass('draggable');
    $(self).trigger(event)
  }, 800);
});

$(document).on("touchend mouseup", function () {
  clearTimeout(t);
  $('.draggable').draggable( 'disable' ).removeClass('draggable');
});

.menu-item {
  width: 50px;
  height: 50px;
  border: 1px solid blue;
  margin: 5px;
}
.menu-item.draggable {
  background-color: orange;
  transform: scale(1.1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div class="menu-item">1</div>
<div class="menu-item">2</div>
<div class="menu-item">3</div>

How can I make it work with both?

Answer 1

Replacing jquerymobile with touchpunch fixed the problem, no code changes required.