jquery-ui sıralanabilir | İPad / dokunmatik cihazlarda nasıl çalıştırılır?


116

JQuery-UI sıralanabilir özelliğinin iPad ve diğer dokunmatik cihazlarda çalışmasını nasıl sağlayabilirim?

http://jqueryui.com/demos/sortable/

Ben kullanarak çalıştı event.preventDefault();, event.cancelBubble=true;ve event.stopPropagation();ile touchmoveve scrollolaylar, ancak sonuç sayfası artık kaydırma değil olmasıydı.

Herhangi bir fikir?


Bunun için bir hata raporu var mı?
Marc-André Lafortune

Bunun gibi bir şey işe yarayabilir mi? github.com/mattbryson/TouchSwipe-Jquery-Plugin
jinglesthula

Yanıtlar:


216

Bir çözüm bulundu (şimdiye kadar yalnızca iPad ile test edildi!)!

http://touchpunch.furf.com/content.php?/sortable/default-functionality


9
Bu, Android tablette de çalışır. Özellikle Android 3.1'de Samsung Galaxy tab 10.1 üzerinde test edilmiştir.
absynce

3
Android 2.3.4 ile Samsung Galaxy S2'de çalışır
MrUpsidown

1
Android 4.1.2 ile Samsung Galaxy S2 üzerinde çalışıyor
Wessel Kranenborg

2
Bu harika çalışıyor! Tüm sayfayı kaplayan bir tablom olmasına rağmen, öğeleri hareket ettirmeden yukarı ve aşağı kaydırmak zorlaşıyor. Bu sorunu ele alan var mı? Öğelerin belirli birine X saniye boyunca dokunana kadar hareket etmesini önlemek için bir şey eklemek hile yapmalı mı?
Tom

2
1/2014 itibariyle, Windows Phone'un Internet Explorer'ında çalışmamaktadır. Umarım, diğer tarayıcılar kullanıma sunulduğunda bu işe yarar.
edcincy

7

Yapmak için sortablemobil üzerinde çalışmaya. Dokunmatik yumruk kullanıyorum :

$("#target").sortable({
  // option: 'value1',
  // otherOption: 'value2',
});

$("#target").disableSelection();

disableSelection();Sıralanabilir örneği oluşturduktan sonra eklemeye dikkat edin .


0

Tom, mouseProto._touchStart olayına aşağıdaki kodu ekledim :

var time1Sec;
var ifProceed = false, timerStart = false;
mouseProto._touchStart = function (event) {

    var self = this;

    // Ignore the event if another widget is already being handled
    if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) {
        return;
    }

    if (!timerStart) {
        time1Sec = setTimeout(function () {
            ifProceed = true;
        }, 1000);
        timerStart=true;
    }
    if (ifProceed) {
        // Set the flag to prevent other widgets from inheriting the touch event
        touchHandled = true;

        // Track movement to determine if interaction was a click
        self._touchMoved = false;

        // Simulate the mouseover event
        simulateMouseEvent(event, 'mouseover');

        // Simulate the mousemove event
        simulateMouseEvent(event, 'mousemove');

        // Simulate the mousedown event
        simulateMouseEvent(event, 'mousedown');
        ifProceed = false;
         timerStart=false;
        clearTimeout(time1Sec);
    }
};
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.