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?

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
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
source

Cela fonctionne également sur les tablettes Android. Testé spécifiquement sur un onglet Samsung Galaxy 10.1 sous Android 3.1.

— absynce

Fonctionne sur Samsung Galaxy S2 avec Android 2.3.4

— MrUpsidown

Fonctionne sur Samsung Galaxy S2 avec Android 4.1.2

— Wessel Kranenborg

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

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

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
source

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
source