HTML Drag & Drop auf Mobilgeräten

89

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.

Fenton
quelle
Auf welche Geräte zielen Sie ab?
Marko
22
@ Marko - alle. Es ist nicht das Web, wenn ich jemanden ausschließe.
Fenton
Wenn Sie jQuery überhaupt nicht wollen, werfen Sie einen Blick auf diese github.com/capriza/mobile-touch
oriharel

Antworten:

101

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/

Vichsu
quelle
4
Funktioniert nicht mit dem Standard-Android 4.0-Browser. Es funktioniert jedoch auf mobilem Chrome.
Timmmm
Haben wir zuerst lange gedrückt, bevor wir ziehen? denn wenn wir die volle Breite in einem Element verwendet haben, das ziehen kann, dann wollen wir nach unten scrollen, es zieht automatisch das Element
CaffeineShots
1
Stellen Sie sicher, dass dies Ihre letzte <script> -Deklaration im Kopf Ihrer HTML-Datei ist, insbesondere jquery-ui,
sonst
@vichsu Vielen Dank für diese Antwort, die mein Problem einfach perfekt gelöst hat.
Brady Zhu
funktioniert wirklich nicht in Android 4.0 .. oder gibt es eine Lösung?
Rashidnk
23

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.

remdevtec
quelle
7

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

Joeri Sebrechts
quelle
Das ist sehr interessant, also werde ich es herunterladen und ein Spiel haben - auf Android getestet und es funktioniert meistens, also muss ich mir nur die Details ansehen - danke!
Fenton
6
Okay, ich werde diese Bibliothek wahrscheinlich nicht speziell verwenden (was bedeutet, dass sie bei Minimierung über 200.000 beträgt), aber ich kann die darin enthaltenen Konzepte verwenden, um die Art von Idee zu bekommen. Die allgemeine Idee ist, dass Sie Ihre Seite nicht als größer als die Größe des Bildschirms interpretieren können, was den mobilen Browser täuscht, die Wischbewegungen / Drags nicht abzufangen!
Fenton
1
Sohnee, wir fügen einen Builder für Touch 1.0 hinzu, der nicht verwendete Teile der Bibliothek entfernt. Dadurch wird der Platzbedarf erheblich verringert. Außerdem ist die vollständige Bibliothek gzippt zwischen 50 und 80 KB groß.
Michael Mullany
7

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

Tomer Almog
quelle
Lizenz-Typ? Frei? Ich habe die Seite überprüft, aber es scheint, als würden sie die Bibliothek verkaufen.
ShanerM13
Es ist 6 Jahre her, seit ich darauf geantwortet habe. Ich bin nicht sicher, ob sie ihren Lizenztyp geändert haben. Es war 2014 kostenlos ...
Tomer Almog
IDK wie ich das übersehen habe, aber greensock.com/licensing
ShanerM13
Grundsätzlich ist es kostenlos, vorausgesetzt, Ihr Produkt ist kostenlos (mit der Ausnahme, dass es einmalige Gebühren zulässt). Andernfalls müssen Sie eine Geschäftslizenz bei ihnen erwerben.
ShanerM13
3

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).

Frosty Z.
quelle
1

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

Tedbaker
quelle
Es hat mir auf jeden Fall geholfen, danke. Ich habe eine sortierbare Checkliste erstellt und das Kontrollkästchen hat nicht geklickt, da das durch Touch-Punch erstellte Div das Kontrollkästchen abdeckte. Dies löste es und es funktionierte. danke ....
Mikeys4u
1

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');
    }
});
Alper Aydingül
quelle
1

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.

Zoup
quelle