Mobil Cihazlarda HTML Sürükle ve Bırak

Sürüklenebilir ve bırakılabilir jQuery UI gibi bir web sayfasına sürükle ve bırak eklediğinizde, bunun bir mobil cihazda bir tarayıcı aracılığıyla görüntülendiğinde çalışmasını nasıl sağlarsınız - burada sürüklemeye yönelik dokunmatik ekran eylemleri, Sayfada gezinmek için telefon vb.

Tüm çözümler hoş geldiniz ... ilk düşüncelerim:

1. Mobil cihazlar için, sürüklenecek öğeyi "kaldıran" ve ardından, öğeyi bırakmak istedikleri bölgeye tıklamalarını sağlayan bir düğmeye sahip olun.

2. Bunu mobil cihazlar için yapan bir uygulama yazın, bunun yerine web sayfasını kullanmaya çalışın!

3. Önerileriniz ve yorumlarınız lütfen.

jQuery UI Touch Punch her şeyi çözüyor.

JQuery UI için bir Dokunma Etkinliği Desteği. Temel olarak, dokunma olayını jQuery UI'ye geri bağlar. İPad, iPhone, Android ve diğer dokunmatik özellikli mobil cihazlarda test edilmiştir. Sıralanabilir jQuery UI kullandım ve bir cazibe gibi çalışıyor.

http://touchpunch.furf.com/

Dokunma olaylarını sürükle ve bırak yöntemine çevirmek için yeni bir çoklu dolgu var, öyle ki HTML5 Sürükle ve Bırak mobil cihazlarda kullanılabilir.

Polyfill üzerinde Bernardo Castilho'nun tarafından tanıtıldı bu yazı .

İşte o gönderiden bir demo .

Gönderi ayrıca folyfill tasarımının birkaç düşüncesini sunar.

Sencha Touch'ın beta sürümü sürükle ve bırak desteğine sahiptir.

DnD Örneğine başvurabilirsiniz . Bu arada, bu yalnızca webkit tarayıcılarında çalışır.

Bu mantığı bir web sayfasına yerleştirmek muhtemelen zor olacak. Anladığım kadarıyla, tüm tarayıcı kaydırmayı devre dışı bırakıyorlar ve kaydırma olaylarını tamamen javascript'te uygulayarak sürükle ve bırak işleminin doğru yorumlanmasına izin veriyorlar.

Güncelleme: orijinal örnek bağlantı öldü, ancak bu alternatifi buldum:
https://github.com/kostysh/Drag-Drop-example-for-Sencha-Touch

Windows Phone dahil olmak üzere masaüstü, mobil, tablette çalışan bir sürükle ve bırak + döndürme oluşturmam gerekiyordu. Sonuncusu daha karmaşık hale getirdi (mspointer ve dokunma olayları).

Çözüm, büyük Greensock kütüphanesinden geldi

Aynı nesneyi sürüklenebilir ve döndürülebilir hale getirmek için çemberlerden biraz zıplamak gerekti ama mükemmel çalışıyor

Siz de bir deneyin olabilir Tim fırfır en sürükle-bırak Polyfill kesinlikle benzer, Bernardo Castilho 'ın one (@remdevtec cevaba bakınız).

Basitçe yapın npm install mobile-drag-drop --save(diğer kurulum yöntemleri mevcuttur, örneğin bower ile)

Daha sonra, dokunma algılamaya dayanan herhangi bir öğe arabirimi, mobil cihazda çalışmalıdır (örneğin, aynı anda kaydırma + sürükleme yerine yalnızca bir öğeyi sürükleme).

Jquery Touch Punch harika ama aynı zamanda yaptığı şey, sürüklenebilir div üzerindeki tüm kontrolleri devre dışı bırakmaktır, bu yüzden bunu önlemek için satırları değiştirmelisiniz ... (yazarken - satır 75)

değişiklik

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

okumak

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') {

'Kilidini açmak' istediğiniz öğelerin her biri için istediğiniz kadar veya ekleyin

Umarım birine yardımcı olur

İşte benim çözümüm:

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

Sortable JS kütüphanesi dokunmatik ekranlar ile uyumludur ve jQuery gerektirmez.

Dokunmatik ekranları kullanma şekli, bir öğeyi sürüklemeye başlamak için ekrana yaklaşık 1 saniye dokunmanız gerekir.

Ayrıca, bu kitaplığın JQuery UI Sortable'dan daha hızlı çalıştığını gösteren bir video testi sunarlar.