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

Question

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

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

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

Спасибо!

ОБНОВЛЕНИЕ: я нашел этот "патч" на веб-сайте jQuery UI

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

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

Answer 1

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

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

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

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

Answer 2

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

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

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

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

Answer 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 UI, вам нужно только включить библиотеку Touchpunch. Не вызывайте.draggable() для.ui-slider-handle, потому что он перезапишет существующую функциональность.

Answer 4

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

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

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