长按的JQuery UI Draggable适用于mousedown但不适用于touchstart

Question

以下在桌面设备（mousedown）上运行正常，但如果您在移动设备（touchstart）上试用，则无法拖动。

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>

如何让它兼具？

Answer 1

用touchpunch替换jquerymobile解决了问题，无需更改代码。