Java-Script-Drag-and-Drop auf Geräten mit Touchscreen

Manchmal ist man eben doch zu voreilig: Für ein Uniprojekt planten und versprachen wir schnell und ohne weitere Recherche eine Web-Applikation, die mittels „Drag-and-Drop“ gesteuert werden kann. An sich keine große Herausforderung: Mit Frameworks wie J-Query UI ist der wesentliche Teil der Arbeit schon erledigt, bevor man anfängt. Dass das alles nebenbei auf einem Tablet-PC mit Berührungsbildschirm laufen soll haben wir dabei nicht als Problem gesehen. Aber leider funktioniert J-Query UIs Drag-and-Drop nicht auf Touch-Displays – genau wie alle vergleichbaren Frameworks auch. Zeit sich nach einer Alternativlösung umzusehen…

Das Problem

Das Problem ist schnell erklärt: Bisherige Ansätze basieren im Wesentlichen auf Maus-Ereignissen, welche Java-Script-Engines bereitstellen. Ein Ziehen beginnt, wenn über einem Objekt die Maustaste gedrückt (und nicht gleich losgelassen) wird, dem Onmousedown-Event. Das Loslassen ist ebenfalls an das Loslassen der Maustaste gekoppelt, onmouseout genannt. Auch die Bewegung selbst ist mit der Maus und onmousemove verbunden.

Da es auf Berührungsbildschirmen keine Maus gibt, werden konsequenterweise auch keine derartigen Events erzeugt. Stattdessen gibt es berührungsbezogene Äquivalente zur Maus: ontouchstart, ontouchmove und ontouchend.

Eine fast schon unwichtige Namensänderung, die Konsequenzen sind aber entsprechend groß: Bisherige Java-Script-Codes funktionieren auf dem Touchscreen nicht.

Lösungsmöglichkeiten

Die genannte Umstellung klingt unkompliziert, dennoch gibt es weder von J-Query UI noch J-Query Mobile eine Lösung. Dennoch gibt es vielversprechende Ansätze:

  • Das J-Query-UI-Plugin „J-Query Touch“ ermöglicht es bereits, HTML-Objekte zu verschieben. Auch auf meinem Smartphone läuft das problemlos. Leider muss man sich um Drop-Felder und ähnliches selber kümmern und viele bestehende Lösungen sind nicht verwendbar.
  • Ross Boucher beschreibt in seinem Blog ebenfalls eine interessante Lösung, die J-Query-UI entsprechend anpasst. Leider konnte ich es noch nicht ausführlich testen, auf jeden Fall werde ich mir dies noch genauer ansehen. Vielleicht sind so auch bestehende J-Query-UI-Plugins verwendbar.

Weiteres zum Thema demnächst.

Das Artikelbild stammt von Bin im Garten, lizenziert unter Creative Commons-Lizenz Namensnennung-Weitergabe unter gleichen Bedingungen 3.0 Unported.

8 Kommentare

  1. Aufschlussreicher Beitrag. Bestimt keine schlechte Sache, sich damit im detail auseinander zusetzen. Werde gewiss auch weitere Artikel verfolgen.

  2. Danke dir, auch wenn der Beitrag ja leider noch keine der Probleme löst. Momentan gucke ich mir diese Lösung an: jquery-ui-touch-punch. Habe darüber viel gutes gelesen und so könnte man auch J-Query UI nutzen. Leider funktioniert es auf meinem Android-Telefon nicht, keine Ahnung warum. Werde es mal auf dem I-Pad testen, hoffe dass die Uni das bald bereitstellt.

  3. Entschuldige, wie konnte man diese unfassbar wichtige Tatsache nur unter den Tisch fallen lassen. Und dann noch, dass wir es für umme bekommen…

  4. Kann man noch als anfänglichen Elan abtun. Mal sehen wie es in sechs Monaten aussieht.

    Seid ihr eigentlich alle nur Bots die Backlinks wollen…?

  5. Sieht wirklich ein bisschen komisch aus. Aber die Seite von Marlon gefällt mir nicht. Du musst noch ein „Dont like“-Button einbauen 😀

Kommentare sind geschlossen.