Interact.js-Modul für Cross-Browser-kompatibles Drag-and-Drop und Multi-Touch-Gesten
Kommentare

User Input kann auf vielerlei Arten stattfinden. Mit dem JavaScript-Modul interact.js kann Input gleichmäßig über verschiedene Browser und Devices präsentiert werden und so praktische Wege bieten, User-Aktionen vorzutäuschen, die gar nicht stattgefunden haben.

Zudem dient interact.js zum Drag-and-Drop, Größenveränderungen und Multi-Touch-Gesten in modernen Browsern sowie Internet Explorer 8 und höher. Taye Adeyami stellt das Modul im Mozilla Entwickler-Blog vor.

Drag-and-Drop und Multi-Touch-Input mit interact.js

interact.js entstand ursprünglich daraus, dass das Biographer’s-Network-Visualization-Tool zu einem SVG-Canvas gerendert und jQuery UI zum Drag-and-Drop, Auswählen und Verändern der Größe genutzt hat. jQuery UI bot aber nur wenig Support für SVGs, wodurch umfangreiche Workarounds nötig waren.

Damit sich die Web-App auch auf mobilen Devices besser nutzen lässt, sollte interact.js jQuery UI ersetzen – immerhin verarbeitet das Modul SVGs und Multi-Touch-Input und überlässt das Rendern und Stylen von Elementen der Applikation. Dazu erlaubt es der Applikation, Objekt-Dimensionen bereitzustellen und ist zudem noch sehr leichtgewichtig.

Werden Event-Listener zu einem Event-Typ hinzugefügt, wird der Funktion ein InteractEvent zugeteilt, das zum Beispiel Pointer-Koordinaten oder Informationen zur Geschwindigkeit des Events ausgibt. So wird die Bewegung eines Elements mittels Drag-and-Drop aus den eigenen Event-Listenern ausgelöst und man behält die Kontrolle über das durch den User ausgelöste Event.

Mit interact.js können zum Beispiel Slider erstellt werden, die in zahlreichen Browsern und auf verschiedenen Plattformen funktionieren, da MouseEvents, TouchEvents und PointerEvents identische Drag-Event-Objekte produzieren. Genauso kann interact.js genutzt werden, um auf einem Canvas-Element zu malen. Auch für einen Grafik-Editor, in dem zum Beispiel Objekte neu angeordnet und ihrer Größe angepasst werden, lässt sich das Modul verwenden

Dies sind nur einige Beispiele für die Nutzung von interact.js. Taye Adeyami erklärt diese deutlich ausführlicher und mit Code-Beispielen in seinem Blogpost. Auf der Projekt-Homepage finden sich zudem verschiedene Demos, die mögliche Einsatzbereiche verdeutlichen; dort steht das Modul auch zum Download zur Verfügung.

Aufmacherbild: Track pad gesture icon series in sketch von Shutterstock / Urheberrecht: puruan

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -