jQuery UI slider pada perangkat sentuh

96

Saya mengembangkan situs web menggunakan jQuery UI, dan ada beberapa elemen di situs saya yang tampaknya tidak kompatibel saat dilihat di perangkat layar sentuh; mereka tidak menyebabkan kesalahan apa pun, tetapi perilakunya tidak seperti yang seharusnya.

Elemen yang dimaksud adalah slider dan rangeliders seperti yang didefinisikan oleh jQuery UI; pada layar sentuh, alih-alih mendaftarkan sentuhan sebagai mengambil pegangan dan menarik sebagai menyeret pegangan melintasi slider, itu hanya menggeser seluruh halaman web ke sisi layar. Ini berfungsi jika Anda mengetuk pegangan dan kemudian mengetuk lokasi pada slider di mana Anda ingin pegangan berakhir, tetapi ini sangat lambat dan tidak ideal. Ada ide?

Saya mencoba mengunduh plugin jqtouch dan kemudian melampirkan .touch([...])ke semua panggilan ke slider () dan rangelider (), tetapi itu tidak berhasil.

Terima kasih!

UPDATE: Saya menemukan "patch" ini di situs jQuery UI

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

yang mengatakan itu memfasilitasi slider di iPhone, tetapi sekarang untuk pertanyaan bodoh lainnya: bagaimana cara memasukkan "tambalan" ini ke dalam kode saya? Apakah saya hanya memasukkannya di awal kode seperti plugin?

slider touch jqtouch jqcoder.dll
sumber

Jawaban:

141

Perpustakaan ini sepertinya menawarkan apa yang Anda cari:

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

Ini juga memiliki beberapa contoh kode penggunaan (cukup tambahkan plugin):

<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
sumber
28
Catatan untuk massa: pasangkan ke pegangan slider, bukan semuanya. (Untuk slider jQuery yang akan$('.ui-slider-handle').draggable();
PaulSkinner
17
Sekarang saya bisa menggerakkan slider-handle ke seluruh halaman !! Ini konyol.
dezman
Saya dapat memindahkan pegangan ke seluruh halaman di Firefox Mac. Saya bertanya-tanya apakah kita perlu menempatkan bersyarat if (ipad | iphone) ... lalu draggable ().
Joe Hyde
13
Gores komentar asli saya di atas. Ini bekerja hanya dengan memasukkan plugin ini ke HEAD. Tambahkan <script src> dengan jangan tambahkan $ (selector) .draggable (); untuk membuat gagang slider berfungsi.
Joe Hyde
6
Anda hanya perlu memasukkan script touch punch dan hanya itu. Seperti yang dikatakan @JoeHyde di komentar keduanya, tidak perlu memanggil .draggable () pada elemen apa pun. Cukup sertakan skrip dan itu akan berfungsi.
Jack Vial
22

Hanya ingin menambahkan beberapa info baru tentang ini. Touch-punch akan bekerja dengan baik untuk iPad dan perangkat Android. Tetapi slider tidak akan berfungsi pada perangkat seluler Windows, sejauh yang saya bisa uji (dengan versi terbaru dari jquery ui & Touch punch)

Perbaikannya cukup sederhana, cukup tambahkan aturan CSS berikut ke .ui-slider-handle:

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

Semoga ini membantu

Stijn_d
sumber
tidak bekerja untuk saya? tautan contoh apa pun, silakan @Stijn_d
ShibinRagh
uhh tapi ini merusak fungsi pukulan sentuh yang sebenarnya
user151496
Ini memperbaiki masalah saya. Terima kasih!
parker_codes
Juga tidak berfungsi dari saya di laptop Dell dengan layar sentuh jsfiddle.net/jhtcqbqo
Jean-François Beauchamp
6

Seperti yang disarankan @dazbradbury, pustaka touchpunch dapat membantu menerjemahkan peristiwa mouse ke peristiwa sentuh. Parameter dalam .draggable () membatasi pergerakan slider sehingga tidak dapat dipindahkan melebihi induk slidernya.

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

EDIT: Jika Anda sudah menggunakan slider Jquery UI , Anda hanya perlu menyertakan perpustakaan touchpunch. Jangan panggil .draggable () untuk .ui-slider-handle karena itu akan menimpa fungsionalitas yang ada.

DPH Trading Rumah Plat Denmark
sumber
Ini membuatnya bekerja untuk saya. Satu-satunya masalah sekarang adalah bahwa wilayah latar belakang (ketika rentang: "min" disetel) tidak mengikuti posisi slider.
ejectamenta
5

Saya memiliki masalah yang sama. Saya mengembangkan bangunan UI slider yang rumit pada slider jQuery UI hanya untuk menyadari bahwa itu tidak berfungsi sama sekali di seluler. Saya mencoba saran yang tercantum di sini tetapi karena saya memiliki solusi khusus yang hanya berdasarkan pada jQuery UI Slider, itu tidak berhasil.

Cukup gunakan noUiSlider .

Itu melakukan semua fitur yang rumit (dan banyak lagi) seperti yang saya buat di atas slider jQuery UI. Ini berfungsi dengan baik di perangkat seluler dan mudah untuk ditata juga.

Adam Karacsony
sumber