Seret dan Lepas HTML Di Perangkat Seluler

91

Saat Anda menambahkan seret dan lepas ke halaman web menggunakan JavaScript, seperti jQuery UI yang dapat diseret dan dijatuhkan, bagaimana Anda membuatnya berfungsi saat dilihat melalui browser pada perangkat seluler - di mana tindakan layar sentuh untuk menyeret dicegat oleh telepon untuk menggulir halaman dll?

Semua solusi diterima ... pemikiran awal saya adalah:

  1. Memiliki tombol untuk perangkat seluler yang "mengangkat" item yang akan diseret dan kemudian membuat mereka mengklik zona tempat mereka ingin meletakkan item tersebut.

  2. Tulis aplikasi yang melakukan ini untuk perangkat seluler daripada mencoba dan membuat halaman web berfungsi pada mereka!

  3. Saran dan komentar Anda silahkan.

Fenton
sumber
Perangkat mana yang Anda targetkan?
Marko
22
@ Marko - semuanya. Bukan Web jika saya mengecualikan siapa pun.
Fenton
Jika Anda sama sekali tidak menginginkan jQuery, lihat github.com/capriza/mobile-touch
oriharel

Jawaban:

101

jQuery UI Touch Punch hanya menyelesaikan semuanya.

Ini adalah Dukungan Acara Sentuh untuk jQuery UI. Pada dasarnya, itu hanya kabel acara sentuh kembali ke jQuery UI. Diuji di iPad, iPhone, Android, dan perangkat seluler berkemampuan sentuh lainnya. Saya menggunakan jQuery UI yang dapat diurutkan dan berfungsi seperti pesona.

http://touchpunch.furf.com/

vichsu
sumber
4
Tidak berfungsi pada browser stok Android 4.0. Itu berfungsi di Chrome seluler.
Timmmm
apakah kita harus menekan lama terlebih dahulu sebelum menyeret? karena ketika kami menggunakan lebar penuh dalam elemen yang dapat menyeret maka kami ingin menggulir ke bawah secara otomatis menyeret elemen
CaffeineShots
1
pastikan untuk menjadikan ini sebagai deklarasi <script> terakhir Anda di bagian atas file html Anda, terutama jquery-ui, atau itu tidak akan berfungsi
whyoz
@vichsu Terima kasih banyak atas jawaban ini, yang memecahkan masalah saya dengan sempurna.
Brady Zhu
benar-benar tidak berfungsi di android 4.0 .. atau apakah ada solusi lain?
rashidnk
23

Ada polyfill baru untuk menerjemahkan peristiwa sentuh ke seret dan lepas, sehingga Seret dan Lepas HTML5 dapat digunakan di seluler.

Polyfill diperkenalkan oleh Bernardo Castilho di posting ini .

Berikut demo dari postingan itu.

Postingan tersebut juga menyajikan beberapa pertimbangan dari desain folyfill.

remdevtec.dll
sumber
7

Versi beta Sencha Touch memiliki dukungan seret dan lepas.

Anda dapat merujuk ke Contoh DnD mereka . Ini hanya berfungsi di browser webkit.

Memperbaiki logika itu ke dalam halaman web mungkin akan sulit. Seperti yang saya pahami, mereka menonaktifkan semua panning browser dan mengimplementasikan peristiwa panning sepenuhnya dalam javascript, memungkinkan interpretasi yang benar dari drag and drop.

Pembaruan: tautan contoh asli sudah mati, tetapi saya menemukan alternatif ini:
https://github.com/kostysh/Drag-Drop-example-for-Sencha-Touch

Joeri Sebrechts
sumber
Ini sangat menarik, jadi saya akan mendownloadnya dan memainkannya - diuji di Android dan sebagian besar berfungsi, jadi hanya perlu melihat detailnya - terima kasih!
Fenton
6
Oke, saya mungkin tidak akan menggunakan pustaka itu secara khusus (dengan lebih dari 200k saat diperkecil), tetapi saya dapat menggunakan konsep yang terkandung di dalamnya untuk mendapatkan jenis gagasan. Ide umumnya adalah Anda membuat halaman tidak dapat diartikan lebih besar dari ukuran layar, yang menipu browser seluler agar tidak mencegat gesekan / seret!
Fenton
1
Sohnee, kami menambahkan pembuat untuk Touch 1.0 yang menghapus bagian perpustakaan yang tidak digunakan, ini akan mengurangi jejak secara substansial. Juga, dalam gzip, perpustakaan lengkapnya adalah 50-80k.
Michael Mullany
7

Saya perlu membuat seret dan lepas + rotasi yang berfungsi di desktop, seluler, tablet termasuk windows phone. Yang terakhir membuatnya lebih rumit (mspointer vs. peristiwa sentuhan).

Solusinya berasal dari perpustakaan Greensock yang hebat

Butuh beberapa lompatan untuk membuat objek yang sama dapat diseret dan diputar tetapi berfungsi dengan sempurna

Tomer Almog
sumber
Tipe lisensi? Gratis? Saya memeriksa situsnya, tetapi sepertinya mereka menjual perpustakaan.
ShanerM13
Sudah 6 tahun sejak saya menjawab ini. Saya tidak yakin apakah mereka mengubah jenis lisensinya. Dulu gratis kembali pada tahun 2014 ...
Tomer Almog
IDK bagaimana saya mengabaikan ini, tetapi greensock.com/licensing
ShanerM13
Pada dasarnya, gratis asalkan produk Anda gratis (dengan pengecualian bahwa mereka mengizinkan satu kali biaya), jika tidak, Anda harus mendapatkan izin usaha dengan mereka.
ShanerM13
3

Anda juga dapat mencoba polyfill drag-n-drop Tim Ruffle , yang tentunya mirip dengan yang dimiliki Bernardo Castilho (lihat jawaban @remdevtec).

Cukup lakukan npm install mobile-drag-drop --save(metode instalasi lain tersedia, misalnya dengan bower)

Kemudian, antarmuka elemen apa pun yang mengandalkan deteksi sentuh akan berfungsi di perangkat seluler (mis. Hanya menyeret elemen, bukan menggulir + menyeret pada saat yang sama).

Frosty Z
sumber
1

Jquery Touch Punch sangat bagus tetapi yang juga dilakukannya adalah menonaktifkan semua kontrol pada div yang dapat diseret sehingga untuk mencegahnya, Anda harus mengubah garis ... (pada saat penulisan - baris 75)

perubahan

if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])){

untuk membaca

if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0]) || event.originalEvent.target.localName === 'textarea'
        || event.originalEvent.target.localName === 'input' || event.originalEvent.target.localName === 'button' || event.originalEvent.target.localName === 'li'
        || event.originalEvent.target.localName === 'a'
        || event.originalEvent.target.localName === 'select' || event.originalEvent.target.localName === 'img') {

tambahkan ors sebanyak yang Anda inginkan untuk setiap elemen yang ingin Anda 'buka'

Harapan yang membantu seseorang

tedbaker
sumber
Itu sangat membantu saya, terima kasih. Saya membuat daftar periksa yang dapat diurutkan dan kotak centang tidak diklik karena div yang dibuat dengan sentuhan-sentuhan menutupi kotak centang. Ini menyelesaikannya dan berhasil. terima kasih ....
Mikeys4u
1

inilah solusi saya:

$(el).on('touchstart', function(e) {
    var link = $(e.target.parentNode).closest('a')  
    if(link.length > 0) {
        window.location.href = link.attr('href');
    }
});
Alper Aydingül
sumber
1

The Sortable JS library kompatibel dengan layar sentuh dan tidak memerlukan jQuery.

Cara menangani layar sentuh adalah Anda perlu menyentuh layar selama sekitar 1 detik untuk mulai menyeret item.

Selain itu, mereka menyajikan pengujian video yang menunjukkan bahwa pustaka ini berjalan lebih cepat daripada JQuery UI Sortable.

Zoup
sumber