Слайдер jQuery UI Поддержка Touch & Drag / Drop на мобильных устройствах

103

Я уже разработал и внедрил слайдер jQuery UI в проект. Несмотря на то, что слайдер отзывчивый, он не реагирует на прикосновения и перетаскивание. Вместо этого вам нужно коснуться того места, куда вы хотите переместить ползунок. Я бы хотел избежать перехода на мобильный пользовательский интерфейс jQuery, который поддерживает касание и перетаскивание, поскольку мы уже широко используем пользовательский интерфейс jQuery (немобильный).

Функциональность, которую мы хотим: Вот
что мы используем: Здесь

На рабочем столе вы не заметите разницы. На мобильном устройстве это очевидно.

Кто-нибудь знает, как добавить эту поддержку в пользовательский интерфейс jquery?

$("#videographers").slider({
  value: 2,
  min: 1,
  max: 3,
  step: 1,
  slide: function(event, ui) {
    return calcTotal(ui.value);
  }
});
Сет
источник

Ответы:

262

jQuery ui не поддерживает сенсорное управление. Вы должны использовать его с jQuery-ui touch punch .

Просто добавьте скрипт после 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>

Вы также можете использовать cdnjs:

<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>

Примечание: лучше поставьте этому репо звезду на Github.

имя пользователя
источник
Это спасает мне день!
Dr3am3rz
Большое спасибо! Это действительно спасает мне день !!
Syamsoul Azrien
Да, он также исправил ошибку, из-за которой ползунок не выбирал правильные значения.
Ронен Фестингер
1
работает как шарм с rails5 устройствами android и ios
Stef Hej
отлично .. работает плавно .. :) Одно наблюдение состоит в том, что в устройствах iOS, когда мы перемещаем слайдер, он не скользит, когда мы касаемся его, но когда мы отпускаем касание, он скользит в этой точке. есть идеи, почему это происходит? у вас есть какое-нибудь решение для этого?
Рахул Дж. Рэйн,
4

Вы можете просто связать этот js.

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

Спасибо.

Меч I
источник
это заставило его работать очень быстро, действительно хорошо. спасибо
tijnn