JQuery UI 长按可拖动适用于 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 解决了问题，无需更改代码。