jquery-ui triable | Comment le faire fonctionner sur iPad / appareils tactiles?

116

Comment faire fonctionner la fonction triable jQuery-UI sur iPad et autres appareils tactiles?

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

J'ai essayé d'utiliser event.preventDefault();, event.cancelBubble=true;et event.stopPropagation();avec le touchmoveet les scrollévénements, mais le résultat est que la page ne défile pas plus longtemps.

Des idées?

horizon de l'événement
la source
Y a-t-il un rapport de bogue pour cela?
Marc-André Lafortune
Est-ce que quelque chose comme ça pourrait être utile? github.com/mattbryson/TouchSwipe-Jquery-Plugin
jinglesthula

Réponses:

216

Trouvé une solution (testée uniquement avec iPad jusqu'à présent!)!

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

horizon de l'événement
la source
9
Cela fonctionne également sur les tablettes Android. Testé spécifiquement sur un onglet Samsung Galaxy 10.1 sous Android 3.1.
absynce
3
Fonctionne sur Samsung Galaxy S2 avec Android 2.3.4
MrUpsidown
1
Fonctionne sur Samsung Galaxy S2 avec Android 4.1.2
Wessel Kranenborg
2
Cela fonctionne très bien! Bien que j'aie un tableau couvrant une page entière, il devient donc difficile de faire défiler vers le haut et vers le bas sans déplacer les éléments. Quelqu'un at-il abordé ce problème? Ajouter quelque chose pour empêcher les éléments de bouger jusqu'à ce qu'ils aient touché celui-ci pendant X secondes devrait faire l'affaire?
Tom
2
Depuis 1/2014, il ne fonctionne pas sur Internet Explorer de Windows Phone. Espérons que lorsque d'autres navigateurs seront disponibles, cela fonctionnera.
edcincy
7

Pour faire du sortabletravail sur mobile. J'utilise le touch-punch comme ceci:

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

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

Prenez note de l'ajout disableSelection();après avoir créé l'instance triable.

vpibano
la source
0

Tom, j'ai ajouté le code suivant à l' événement 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
la source