Touchunterstützung für Drag & Drop

Internet Explorer 11 bietet jetzt systemeigene Unterstützung für touchbasiertes Drag & Drop in HTML5.

Wenn Sie Ihre Web App mit der Drag & Drop-Funktion versehen, können Benutzer auf intuitive Weise Dateien von A nach B verschieben oder kopieren sowie die Anordnung von Elementen in einer Sammlung ändern. Genauso wie Internet Explorer standardmäßig grundlegende Touchunterstützung bietet, sollten die meisten Websites, die HTML5-Drag & Drop verwenden, mit dem Benutzerinteraktionsmuster Gedrückthalten und Ziehen funktionieren. Sie empfangen zwar erwartungsgemäß Benutzereingabeereignisse über den UI-Thread, tatsächlich behandelt IE das Rendering und die Animation des duplizierten Ziehbilds jedoch in einem separaten Thread, damit Ihre Website weiterhin reagiert.

Wichtig  Dieses Feature wird in IE11 unter Windows 7 nicht unterstützt.

Muster für Benutzerfreundlichkeit

Gedrückthalten und Ziehen

Bei Touchgeräten, die Webinhalte anzeigen, ist Gedrückthalten und Ziehen ein übliches Benutzerinteraktionsmuster für Drag & Drop. Dies ist das Standardverhalten von Elementen mit dem draggable-Attribut in IE11. Auf vielen Websites befinden sich Inhalte unterhalb der Kante, sodass die Anzeige vertikal verschoben bzw. ein vertikaler Bildlauf ausgeführt werden muss, und Internet Explorer auf der neuen Windows-Benutzeroberfläche bietet die Möglichkeit zur Vorwärts-/Rückwärtsnavigation mittels horizontaler Streifbewegung. Daher eignet sich das Muster Gedrückthalten und Ziehen für touchbasiertes Drag & Drop im Allgemeinen auch am besten für Websites in IE11, wohingegen das Muster Querziehen eine effektive Technik für Drag & Drop in Windows Store-Apps darstellt.

Hinweis  Als Bereich für die Unterstützung von touchbasierten Drag & Drop-Vorgängen ist ein einzelnes Browserfenster festgelegt. Es ist zwar nicht möglich, Elemente fensterübergreifend zu ziehen, das Ziehen von Dateiobjekten vom Windows-Desktop in IE11-Fenster auf dem Desktop wird jedoch unterstützt.

Querziehen

Viele Windows Store-Apps sowie einige Websites nutzen ein flaches Navigationssystem. Hier bewegt sich der Benutzer auf einer einzelnen Seite und/oder navigiert durch Seiten, die sich alle auf der gleichen Hierarchiestufe der Website befinden. Mithilfe des Interaktionsmusters Querziehen können diese Apps unterscheiden, ob der Benutzer eine Verschiebung oder eine Ziehaktion ausführen möchte. Hierzu wird die Verschiebung mithilfe der touch-action -Eigenschaft nur entlang einer einzelnen Achse zugelassen:


touch-action: pan-x;

Dann erfolgt die Antwort auf drag events und manipulation events entlang der senkrechten Achse:

Interaktionsmuster "Querziehen"

Um das Querziehen zu verbessern, verwenden IE11 und Windows Store-Apps nun den cross-slide-x- und den cross-slide-y-Wert in der touch-action-Eigenschaft. Diese Werte geben vor, dass IE (oder im Falle von Windows Store-Apps: die Windows-Runtime) auf bestimmte Benutzerinteraktionen mit Querziehen-Animationen in einem UI-unabhängigen Thread reagiert.

Des Weiteren stehen für IE11 und Windows Store-Apps einige neue Zustandswerte zur Verfügung, um eine differenziertere Behandlung von MSManipulationEvent zu ermöglichen:

BenennungBeschreibung

MS_MANIPULATION_STATE_PRESELECT

Ein Kontakt hat eine Querziehen-Interaktion initiiert.

MS_MANIPULATION_STATE_SELECTING

Bei einer Querziehen-Interaktion wurde der Entfernungsschwellenwert für den Auswahlmodus überschritten: Der Auswahlmodus wird aktiviert.

MS_MANIPULATION_STATE_DRAGGING

Bei einer Querziehen-Interaktion wurde der Entfernungsschwellenwert für den Ziehmodus überschritten: Der Ziehmodus wird aktiviert.

MS_MANIPULATION_STATE_CANCELLED

Eine Querziehen-Interaktion wurde abgebrochen. Mögliche Ursachen:

  • Der Benutzer hat die ESC-TASTEgedrückt.
  • Das Fenster hat den Fokus verloren.
  • Der zugeordnete Zeiger wurde verworfen (beispielsweise aufgrund eines Digitalisiererproblems).
  • Der Ziehvorgang wurde skriptbedingt abgebrochen (beispielsweise durch Aufrufen von preventDefault für ein Ereignis vom Typ dragstart oder drag)

MS_MANIPULATION_STATE_COMMITTED

Der Touch-Zeiger wurde freigegeben, und die Manipulation ist abgeschlossen.

 

Verwandte Themen

Zwischenablageunterstützung für Bilder

 

 

Anzeigen:
© 2014 Microsoft