Слайдер 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>

Спасибо.


это заставило его работать очень быстро, действительно хорошо. спасибо
tijnn
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.