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

96

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

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

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

Спасибо!

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

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

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

jqcoder
источник

Ответы:

141

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

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>
Dazbradbury
источник
28
Обратите внимание на массу: прикрепляйте ее к ручке слайдера, а не целиком. (Для слайдера jQuery это будет$('.ui-slider-handle').draggable();
PaulSkinner
17
Теперь я могу перемещать ползунок по всей странице !! Это смешно.
dezman
Я могу перемещать ручку по всей странице в Firefox Mac. Мне интересно, нужно ли нам размещать условное if (ipad | iphone) ... then draggable ().
Джо Хайд
13
Поцарапайте мой исходный комментарий выше. Это работает, просто включив этот плагин в HEAD. Добавьте <script src>, не добавляя $ (selector) .draggable (); для работы ручки слайдера.
Джо Хайд,
6
Вам нужно только включить скрипт сенсорной панели и все. Как сказал @JoeHyde в своем втором комментарии, нет необходимости вызывать .draggable () для любого элемента. Просто включите сценарий, и он должен работать.
Джек Виал,
22

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

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

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

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

Stijn_d
источник
у меня не работает? любой пример ссылки, пожалуйста, @Stijn_d
ShibinRagh
эээ, но это разрушает функционирование самого сенсорного удара
user151496
Это устранило мою проблему. Спасибо!
parker_codes
Не работает со мной на ноутбуке Dell с сенсорным экраном jsfiddle.net/jhtcqbqo
Жан-Франсуа Бошан
6

Как предложил @dazbradbury, библиотека сенсорной панели может помочь преобразовать события мыши в события касания. Параметры в .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, потому что он перезапишет существующие функции.

DPH Trading Danish Plate House
источник
У меня это сработало. Единственная проблема теперь заключается в том, что фоновая область (когда установлен диапазон: «мин») не подчиняется положению ползунка.
ejectamenta
5

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

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

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

Адам Карачони
источник