{"id":236,"date":"2011-07-05T23:27:09","date_gmt":"2011-07-05T21:27:09","guid":{"rendered":"https:\/\/sgaul.de\/?p=236"},"modified":"2014-03-13T21:34:55","modified_gmt":"2014-03-13T20:34:55","slug":"java-script-drag-and-drop-auf-geraten-mit-touch-display","status":"publish","type":"post","link":"https:\/\/sgaul.de\/2011\/07\/05\/java-script-drag-and-drop-auf-geraten-mit-touch-display\/","title":{"rendered":"Java-Script-Drag-and-Drop auf Ger\u00e4ten mit Touchscreen"},"content":{"rendered":"<p>Manchmal ist man eben doch zu voreilig: F\u00fcr ein Uniprojekt planten und versprachen wir schnell und ohne weitere Recherche eine <a href=\"http:\/\/www.georf.de\/517\/tweedback-uniprojekt-mit-js-und-html\/\">Web-Applikation<\/a>, die mittels \u201e<strong>Drag-and-Drop<\/strong>\u201c gesteuert werden kann. An sich keine gro\u00dfe Herausforderung: Mit Frameworks wie <strong>J-Query UI<\/strong> ist der wesentliche Teil der Arbeit schon erledigt, bevor man anf\u00e4ngt. Dass das alles nebenbei auf einem Tablet-PC mit Ber\u00fchrungsbildschirm laufen soll haben wir dabei nicht als Problem gesehen. Aber <strong>leider funktioniert J-Query UIs Drag-and-Drop nicht auf<\/strong> <strong>Touch-Displays<\/strong> \u2013 genau wie alle vergleichbaren Frameworks auch. Zeit sich nach einer <strong>Alternativl\u00f6sung<\/strong> umzusehen&#8230;<!--more--><\/p>\n<h2>Das Problem<\/h2>\n<p>Das Problem ist schnell erkl\u00e4rt: <strong>Bisherige Ans\u00e4tze basieren im Wesentlichen auf Maus-Ereignissen<\/strong>, welche Java-Script-Engines bereitstellen. Ein Ziehen beginnt, wenn \u00fcber einem Objekt die Maustaste gedr\u00fcckt (und nicht gleich losgelassen) wird, dem <strong>Onmousedown<\/strong>-Event. Das Loslassen ist ebenfalls an das Loslassen der Maustaste gekoppelt, <strong>onmouseout<\/strong> genannt. Auch die Bewegung selbst ist mit der Maus und <strong>onmousemove<\/strong> verbunden.<\/p>\n<p>Da es auf Ber\u00fchrungsbildschirmen <strong>keine Maus<\/strong> gibt, werden konsequenterweise auch keine derartigen Events erzeugt. Stattdessen gibt es ber\u00fchrungsbezogene \u00c4quivalente zur Maus: <strong>ontouchstart<\/strong>, <strong>ontouchmove<\/strong> und <strong>ontouchend<\/strong>.<\/p>\n<p>Eine fast schon unwichtige Namens\u00e4nderung, die Konsequenzen sind aber entsprechend gro\u00df: Bisherige Java-Script-Codes funktionieren auf dem Touchscreen nicht.<\/p>\n<h2>L\u00f6sungsm\u00f6glichkeiten<\/h2>\n<p>Die genannte Umstellung klingt unkompliziert, dennoch gibt es <strong>weder von J-Query UI noch J-Query Mobile eine L\u00f6sung<\/strong>. Dennoch gibt es vielversprechende Ans\u00e4tze:<\/p>\n<ul>\n<li>Das J-Query-UI-Plugin \u201e<a href=\"http:\/\/www.midemos.com\/demos\/iphone\/touch\/?\/iphone\/touch\">J-Query Touch<\/a>\u201c erm\u00f6glicht es bereits, HTML-Objekte zu verschieben. Auch auf meinem Smartphone l\u00e4uft das problemlos. Leider muss man sich um Drop-Felder und \u00e4hnliches selber k\u00fcmmern und viele bestehende L\u00f6sungen sind nicht verwendbar.<\/li>\n<li><a href=\"http:\/\/ross.posterous.com\/2008\/08\/19\/iphone-touch-events-in-javascript\">Ross Boucher beschreibt in seinem Blog<\/a> ebenfalls eine interessante L\u00f6sung, die J-Query-UI entsprechend anpasst. Leider konnte ich es noch nicht ausf\u00fchrlich testen, auf jeden Fall werde ich mir dies noch genauer ansehen. Vielleicht sind so auch bestehende J-Query-UI-Plugins verwendbar.<\/li>\n<\/ul>\n<p>Weiteres zum Thema demn\u00e4chst.<\/p>\n<section class=\"source\">Das Artikelbild stammt von <a title=\"User:Bin im Garten\" href=\"http:\/\/commons.wikimedia.org\/wiki\/User:Bin_im_Garten\">Bin im Garten<\/a>, lizenziert unter  <a title=\"w:de:Creative Commons\" href=\"http:\/\/en.wikipedia.org\/wiki\/de:Creative_Commons\">Creative Commons<\/a>-Lizenz <a href=\"http:\/\/creativecommons.org\/licenses\/by-sa\/3.0\/deed.de\" rel=\"nofollow\">Namensnennung-Weitergabe unter gleichen Bedingungen 3.0 Unported<\/a>.<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Manchmal ist man eben doch zu voreilig: F\u00fcr ein Uniprojekt planten und versprachen wir schnell und ohne weitere Recherche eine Web-Applikation, die mittels \u201eDrag-and-Drop\u201c gesteuert werden kann. An sich keine gro\u00dfe Herausforderung: Mit Frameworks wie J-Query UI ist der wesentliche Teil der Arbeit schon erledigt, bevor man anf\u00e4ngt. Dass das alles nebenbei auf einem Tablet-PC&hellip; <a class=\"more-link\" href=\"https:\/\/sgaul.de\/2011\/07\/05\/java-script-drag-and-drop-auf-geraten-mit-touch-display\/\"><span class=\"screen-reader-text\">Java-Script-Drag-and-Drop auf Ger\u00e4ten mit Touchscreen<\/span> weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":237,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[91],"tags":[85,158],"_links":{"self":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/236"}],"collection":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/comments?post=236"}],"version-history":[{"count":7,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/236\/revisions"}],"predecessor-version":[{"id":241,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/236\/revisions\/241"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/media\/237"}],"wp:attachment":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/media?parent=236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/categories?post=236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/tags?post=236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}