jquery-ui sorteerbaar | Hoe krijg je het werkend op iPad/touchdevices?

Hoe zorg ik ervoor dat de jQuery-UI sorteerbare functie werkt op iPad en andere aanraakapparaten?

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

Ik heb geprobeerd om event.preventDefault();, event.cancelBubble=true;en event.stopPropagation();te gebruiken met de gebeurtenissen touchmoveen scroll, maar het resultaat was dat de pagina niet meer scrolde.

Enig idee?

Antwoord 1, autoriteit 100%

Een oplossing gevonden (tot nu toe alleen getest met iPad!)!

https://github.com/furf/jquery-ui-touch-punch

Antwoord 2, autoriteit 3%

Om sortablete laten werken op mobiel.
Ik gebruik touch-punchals volgt:

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

Let op het toevoegen van disableSelection();na het maken van de sorteerbare instantie.

Antwoord 3

Tom,
Ik heb de volgende code toegevoegd aan het evenement 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);
    }
};

Antwoord 4

De oplossing van @eventorizon werkt 100%.
Als je het echter op telefoons inschakelt, krijg je in de meeste gevallen problemen met scrollen, en in mijn geval werkte mijn accordeon niet meer omdat het niet-klikbaar werd. Een tijdelijke oplossing om dit op te lossen is om het slepen initialiseerbaar te maken door bijvoorbeeld een pictogram, en vervolgens sorteerbaar te maken om het slepen als volgt te initialiseren:

$("#sortableDivId").sortable({
        handle: ".ui-icon"
});

waar je de klasnaam doorgeeft van wat je als initializer wilt gebruiken.

Antwoord 5

De link voor het meest gestemde antwoord is nu verbroken.

JQuery UI Sortable op mobiel laten werken:

1. Voeg toe dit JavaScript-bestandtoevoegen aan uw project.
2. Verwijs naar dat JS-bestand op je pagina.

Voor meer informatie, bekijk deze link.