Seret dan Lepas HTML Di Perangkat Seluler

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.

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/

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.

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

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

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

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

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');
    }
});

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.