JQuery UI Draggable auf lange drücken funktioniert mit mousedown aber nicht touchstart

Question

Die folgenden funktioniert gut auf dem Desktop (mousedown), aber wenn Sie es auf Handy versuchen (touchstart) zieht es nicht.

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>

Wie kann ich es machen mit beiden arbeiten?

Answer 1

Das Ersetzen von jquerymobile mit touchpunch behebt das Problem, keine Codeänderungen erforderlich.