jquery-ui sortable | Bagaimana cara membuatnya berfungsi di iPad / perangkat sentuh?

116

Bagaimana cara mengaktifkan fitur jQuery-UI yang dapat diurutkan di iPad dan perangkat sentuh lainnya?

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

Saya mencoba menggunakan event.preventDefault();,, event.cancelBubble=true;dan event.stopPropagation();dengan touchmovedan scrollperistiwa, tetapi hasilnya adalah halaman tidak bergulir lagi.

Ada ide?

eventhorizon
sumber
Apakah ada laporan bug untuk ini?
Marc-André Lafortune
Bisakah sesuatu seperti ini berguna? github.com/mattbryson/TouchSwipe-Jquery-Plugin
jinglesthula

Jawaban:

216

Menemukan solusi (hanya diuji dengan iPad sampai sekarang!)!

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

eventhorizon
sumber
9
Ini berfungsi di tablet Android juga. Diuji secara khusus pada Samsung Galaxy tab 10.1 di Android 3.1.
absynce
3
Bekerja pada Samsung Galaxy S2 dengan Android 2.3.4
MrUpsidown
1
Bekerja pada Samsung Galaxy S2 dengan Android 4.1.2
Wessel Kranenborg
2
Ini bekerja dengan baik! Meskipun saya memiliki tabel yang mencakup seluruh halaman sehingga menjadi sulit untuk menggulir ke atas dan ke bawah tanpa memindahkan elemen. Apakah ada yang membahas masalah ini? Menambahkan sesuatu untuk mencegah elemen bergerak sampai mereka menyentuh yang spesifik selama X detik harus melakukan trik?
Tom
2
Mulai 1/2014, ini tidak berfungsi di Internet Explorer Windows Phone. Mudah-mudahan, saat browser lain tersedia, ini akan berfungsi.
edcincy
7

Untuk sortablebekerja di perangkat seluler. Saya menggunakan pukulan sentuh seperti ini:

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

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

Perhatikan penambahan disableSelection();setelah membuat instance yang dapat diurutkan.

vpibano.dll
sumber
0

Tom, saya telah menambahkan kode berikut ke acara mouseProto._touchStart :

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);
    }
};
Karan Dubal
sumber