JQuery UI слайдеры на сенсорных устройствах

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

Элементы, о которых идет речь, - ползунки и диапазоны, как определено jQuery UI; на сенсорном экране вместо того, чтобы регистрировать прикосновение, поднимая ручку и перетаскивая ее, перетаскивая ручку по ползунку, она просто перемещает всю веб-страницу в сторону экрана. Он работает, если вы нажмете на ручку, а затем коснитесь места на слайдере, где вы хотите, чтобы ручка закончилась, но это очень медленно и не идеально. Любые идеи?

Я попробовал загрузить плагин jqtouch и затем прикрепить .touch([...]) ко всем вызовам слайдера() и rangelider(), но это не сработало.

Спасибо!

UPDATE: я нашел этот "патч" на веб-сайте jQuery UI

http://bugs.jqueryui.com/ticket/4143

который говорит, что он облегчает слайдер на iPhone, но теперь для другого глупого вопроса: как включить этот "патч" в свой код? Я просто включил его в начало кода, как плагин?

Ответ 1

Эта библиотека, похоже, предлагает то, что вы ищете:

https://github.com/furf/jquery-ui-touch-punch#readme

В нем также есть пример использования кода (просто добавьте плагин):

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
  $('#widget').draggable();
</script>

Ответ 2

Просто хотел добавить новую информацию об этом. Touch-punch отлично подходит для Ipads и Android-устройств. Но слайдер не будет работать на мобильных устройствах Windows, насколько я могу проверить (с последними версиями jquery ui и Touch punch)

Исправление довольно просто, просто добавьте следующие CSS-правила в .ui-slider-handle:

-ms-touch-action: none;
touch-action: none;

Надеюсь, что это поможет

Ответ 3

Как предположил @dazbradbury, библиотека touchpunch может помочь перевести события мыши на события события. Параметры в .draggable() ограничивают перемещение ползунка, поэтому его нельзя перемещать за пределы его ползунка.

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
$(".ui-slider-handle").draggable({ 
    axis: "x",
    containment: "parent"
});
</script>

РЕДАКТИРОВАТЬ: Если вы уже используете слайдер JQuery JQuery, вам нужно включить только библиотеку touchpunch. Не вызывайте .draggable() для .ui-slider-handle, потому что он перезапишет существующую функциональность.

Ответ 4

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

Просто используйте noUiSlider.

Он выполняет все сложные функции (и многое другое), как тот, который я построил поверх слайдера jQuery UI. Он прекрасно работает на мобильных устройствах и легко стирается.

Ответ 5

для функции использования слайдера $('#your_slider_id').slider();