Повзунки jQuery UI на сенсорних пристроях

95

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

Елементами, про які йдеться, є повзунки та повзунки діапазону, як визначено інтерфейсом jQuery; на сенсорному екрані, замість того, щоб реєструвати дотик як підхоплення ручки та перетягування як перетягування ручки по повзунку, він просто ковзає всю веб-сторінку в бік екрана. Це спрацьовує, якщо натиснути на ручку, а потім натиснути місце на повзунку, де потрібно, щоб опинилася ручка, але це дуже повільно і не ідеально. Якісь ідеї?

Я спробував завантажити плагін jqtouch, а потім приєднати .touch([...])до всіх викликів слайдер () та rangeslider (), але це не спрацювало.

Дякую!

ОНОВЛЕННЯ: Я знайшов цей "патч" на веб-сайті jQuery UI

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

це означає, що це полегшує повзунок на iPhone, але тепер ще одне дурне запитання: як мені включити цей "патч" у свій код? Чи просто я включаю його на початку коду, як плагін?

slider touch jqtouch

— jqcoder
джерело

140

Здається, ця бібліотека пропонує те, що ви шукаєте:

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>

— дазбрадбері
джерело

28

Зверніть увагу на маси: прикріпіть його до ручки повзуна, а не всю справу. (Для повзунка jQuery, який буде$('.ui-slider-handle').draggable();

— PaulSkinner

17

Тепер я можу переміщати ручку повзунка по всій сторінці !! Це смішно.

— dezman

Я можу переміщати ручку по всій сторінці у Firefox Mac. Мені цікаво, чи потрібно нам розміщувати умовний if (ipad | iphone) ... потім перетягувати ().

— Joe Hyde

13

Подряпайте мій оригінальний коментар вище. Це працює, просто включивши цей плагін до HEAD. Додайте <script src>, не додаючи $ (селектор) .draggable (); для роботи ручок повзунків.

— Джо Хайд,

6

Вам потрібно включити лише сценарій сенсорного удару і все. Як сказав @JoeHyde у своєму другому коментарі, немає необхідності викликати .draggable () для будь-якого елемента. Просто включіть сценарій, і він повинен працювати.

— Jack Vial

22

Просто хотів додати трохи нової інформації про це. Сенсорний удар добре працюватиме для Ipads та пристроїв Android. Але повзунок не працюватиме на мобільних пристроях Windows, наскільки я міг перевірити (з останніми версіями jquery ui & Touch punch)

Виправлення досить просте, просто додайте наступні правила CSS до дескриптора .ui-slider:

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

Сподіваюся, це допомагає

— Stijn_d
джерело

не працює у мене? будь-який приклад посилання, будь ласка @Stijn_d

— ShibinRagh

ну, але це руйнує функціонування власне сенсорного удару

— user151496

Це вирішило мою проблему. Дякую!

— parker_codes

Я також не працюю у мене на ноутбуці Dell із сенсорним екраном jsfiddle.net/jhtcqbqo

— Жан-Франсуа Бошан

6

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

— DPH Trading Датський тарілковий дім
джерело

Це змусило мене працювати. Єдина проблема в тому, що фонова область (коли встановлено діапазон: "хв") не підпорядковується позиції повзунка.

— викидання

Це має бути прийнятою відповіддю.

— націоналхімік

3

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

Просто використовуйте noUiSlider .

Він виконує всі складні функції (і багато іншого), як ту, яку я створив поверх повзунка інтерфейсу користувача jQuery. Він чудово працює на мобільних пристроях і його також легко стилізувати.

— Адам Карачон
джерело