HTML Drag & Drop auf Mobilgeräten

Wenn Sie einer Webseite Drag & Drop mit JavaScript hinzufügen, z. B. jQuery UI, ziehbar und ablegbar, wie funktioniert dies, wenn Sie es über einen Browser auf einem mobilen Gerät anzeigen - wobei die Touchscreen-Aktionen zum Ziehen vom. Abgefangen werden Telefon zum Scrollen auf der Seite usw.?

Alle Lösungen sind willkommen ... meine ersten Gedanken sind:

1. Haben Sie eine Schaltfläche für mobile Geräte, die das zu ziehende Objekt "anhebt" und sie dann dazu bringt, auf die Zone zu klicken, in der sie das Objekt ablegen möchten.

2. Schreiben Sie eine App, die dies für mobile Geräte tut, anstatt zu versuchen, die Webseite dazu zu bringen, daran zu arbeiten!

3. Ihre Vorschläge und Kommentare bitte.

jQuery UI Touch Punch löst einfach alles.

Es ist eine Touch Event-Unterstützung für die jQuery-Benutzeroberfläche. Grundsätzlich werden Touch-Ereignisse nur mit der jQuery-Benutzeroberfläche verbunden. Getestet auf iPad, iPhone, Android und anderen Touch-fähigen Mobilgeräten. Ich habe jQuery UI sortierbar verwendet und es funktioniert wie ein Zauber.

http://touchpunch.furf.com/

Es gibt eine neue Polyfüllung zum Übersetzen von Berührungsereignissen in Drag & Drop, sodass HTML5 Drag & Drop auf Mobilgeräten verwendet werden kann.

Die Polyfüllung wurde von Bernardo Castilho in diesem Beitrag vorgestellt .

Hier ist eine Demo von diesem Beitrag.

Der Beitrag enthält auch einige Überlegungen zum Folyfill-Design.

Die Beta-Version von Sencha Touch unterstützt Drag & Drop.

Sie können sich auf ihr DnD-Beispiel beziehen . Dies funktioniert übrigens nur in Webkit-Browsern.

Das Nachrüsten dieser Logik in eine Webseite wird wahrscheinlich schwierig sein. Soweit ich weiß, deaktivieren sie alle Browser-Pans und implementieren Panning-Ereignisse vollständig in Javascript, was eine korrekte Interpretation von Drag & Drop ermöglicht.

Update: Der ursprüngliche Beispiellink ist tot, aber ich habe diese Alternative gefunden:
https://github.com/kostysh/Drag-Drop-example-for-Sencha-Touch

Ich musste ein Drag & Drop + Rotation erstellen, das auf Desktop, Handy, Tablet einschließlich Windows Phone funktioniert. Der letzte machte es komplizierter (mspointer vs. touch events).

Die Lösung kam aus der großen Greensock-Bibliothek

Es dauerte einige Sprünge durch Reifen, um dasselbe Objekt ziehbar und drehbar zu machen, aber es funktioniert perfekt

Sie können auch Tim Ruffles Drag-and-Drop-Polyfüllung ausprobieren , die sicherlich der von Bernardo Castilho ähnelt (siehe Antwort von @remdevtec).

Einfach machen npm install mobile-drag-drop --save(andere Installationsmethoden verfügbar, zB mit Laube)

Dann sollte jede Elementoberfläche, die auf Berührungserkennung beruht, auf Mobilgeräten funktionieren (z. B. nur ein Element ziehen, anstatt gleichzeitig zu scrollen + zu ziehen).

Jquery Touch Punch ist großartig, aber es deaktiviert auch alle Steuerelemente auf dem ziehbaren Div. Um dies zu verhindern, müssen Sie die Zeilen ändern ... (zum Zeitpunkt des Schreibens - Zeile 75)

Veränderung

if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])){

lesen

if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0]) || event.originalEvent.target.localName === 'textarea'
        || event.originalEvent.target.localName === 'input' || event.originalEvent.target.localName === 'button' || event.originalEvent.target.localName === 'li'
        || event.originalEvent.target.localName === 'a'
        || event.originalEvent.target.localName === 'select' || event.originalEvent.target.localName === 'img') {

Fügen Sie für jedes der Elemente, die Sie freischalten möchten, so viele Ors hinzu, wie Sie möchten.

Hoffe das hilft jemandem

Hier ist meine Lösung:

$(el).on('touchstart', function(e) {
    var link = $(e.target.parentNode).closest('a')  
    if(link.length > 0) {
        window.location.href = link.attr('href');
    }
});

Die sortierbare JS-Bibliothek ist mit Touchscreens kompatibel und erfordert keine jQuery.

Bei der Handhabung von Touchscreens müssen Sie den Bildschirm etwa 1 Sekunde lang berühren, um mit dem Ziehen eines Elements zu beginnen.

Außerdem präsentieren sie einen Videotest, der zeigt, dass diese Bibliothek schneller als JQuery UI Sortable ausgeführt wird.