JQuery用户界面可拖动长按工作与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解决了这个问题，不需要更改代码。