jQuery UI-Schieberegler Touch & Drag/Drop-Unterstützung auf mobilen Geräten

Question

Ich habe bereits jQuery UI-Schieberegler in ein Projekt gestylt und implementiert. Während es mobil ist und richtig skaliert, erlaubt es kein Tippen und Ziehen. Stattdessen müssen Sie berühren, wohin der Schieberegler gehen soll. jQuery Mobile UI unterstützt dies, aber ich habe Zeit in das investiert, was bereits da ist.

Die Funktionalität, die wir wollen: Here
Was wir verwenden: Here

Auf einem Desktop Sie den Unterschied nicht sagen. Auf einem mobilen Gerät ist es offensichtlich.

Wer weiß, wie man diese Unterstützung zu jquery UI hinzufügt?

$("#cameraSlider").slider({ 
    value: 2, 
    min: 1, 
    max: 3, 
    step: 1, 
    slide: function(event, ui) { 
    cameramen = ui.value; 
    return calcTotal(); 
    } 
}); 

Danke, Seth

Answer 1

jQuery ui nicht über Touch-Unterstützung. Sie sollten es mit jQuery-ui touch punch verwenden.

Fügen Sie einfach das Skript nach jQuery ui:

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script> 
<script src="jquery.ui.touch-punch.min.js"></script> 

Sie auch cdnjs verwenden können:

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script> 

Hinweis: Bessere this repo ein Stern auf Github geben.

Answer 2

Sie können einfach diese js verknüpfen.

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script> 

danke.