Animieren von Drag & Drop-Sequenzen (HTML)
[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]
Verwenden Sie Drag & Drop-Animationen, wenn Benutzer Objekte direkt mit dem Finger oder mit einem Eingabegerät wie einer Maus oder einem Eingabestift verschieben. Zu den gängigen Drag & Drop-Aktionen gehören das Verschieben eines einzelnen Elements innerhalb einer Liste und das Ablegen eines Elements auf einem anderen.
Hinweis Verwenden Sie Drag & Drop-Animationen nur, wenn die Benutzer das Objekt verschieben. Um das Objekt auf andere Weise zu verschieben, sollten Sie Positionsänderungsanimationen verwenden.
Dieser Satz von Animationen umfasst die folgenden Funktionen:
- dragSourceStart: Der Benutzer beginnt mit dem Ziehen eines Objekts.
- dragBetweenEnter: Der Benutzer zieht ein Objekt zwischen zwei andere Objekte, zwischen denen es abgelegt werden kann.
- dragBetweenLeave: Der Benutzer zieht ein Objekt von einer potenziellen Ablageposition weg.
- dragSourceEnd: Der Benutzer legt ein gezogenes Objekt ab.
In ListView und GridLayout ist standardmäßige Ziehunterstützung für JavaScript verfügbar. Die Drag & Drop-Animationen werden integriert, wenn Sie diese Steuerelemente auf Ihrer UI verwenden. Allerdings sind die in diesem Thema behandelten Animationen nützlich, wenn Sie die Drag & Drop-Funktionalität auf andere Steuerelemente ausweiten, besonders Ihre eigenen benutzerdefinierten Steuerelemente.
Das folgende Video zeigt die Animationen für einen Drag & Drop-Vorgang:
Starten des Ziehens
Jede Drag & Drop-Animationssequenz beginnt mit der Animation für das Starten des Ziehens (dragSourceStart), die angezeigt wird, wenn Benutzer mit dem Ziehen eines Objekts beginnen.
Durch diese Animation ändert sich das Aussehen der Ziehquelle (das gezogene Objekt) und eines oder mehrerer betroffener Objekte. Ein betroffenes Objekt ist ein Objekt, dessen Position infolge der Drag & Drop-Sequenz möglicherweise geändert wird. So sind beispielsweise beim Neuordnen einer Liste alle Elemente in der Liste außer der Ziehquelle betroffene Objekte, da sich ihre Position in der Liste dadurch ändern kann. Betroffene Elemente werden animiert, damit die Benutzer erkennen können, wie sich die Position der Elemente als Reaktion auf die aktuelle Aktion verändern würde. Nicht für jede Ziehquelle gibt es betroffene Objekte.
Um die dragSourceStart-Funktion zu verwenden, müssen Sie das von den Benutzern gezogene Objekt und die betroffenen Objekte kennen.
Die folgenden Bilder veranschaulichen die Beziehung zwischen der Ziehquelle und den betroffenen Objekten in der Animation für das Starten des Ziehens. Das erste Bild zeigt das Ziehobjekt und die benachbarten Objekte, bevor Benutzer das Objekt zu ziehen beginnen.
.png "Vier Objekte gleicher Größe, ein Objekt ist als Ziehquelle beschriftet.")
Wenn Benutzer das Objekt auswählen und es zu ziehen beginnen, wird das gezogene Objekt größer, und die betroffenen Objekte werden kleiner.
.png "Vier Objekte mit vergrößerter Ziehquelle und drei leicht verkleinerten betroffenen Objekten")
Das nächste Bild zeigt eine Situation, in der die benachbarten Objekte nicht betroffen sind.
.png "Vier Objekte mit vergrößerter Ziehquelle und den drei anderen Objekten mit unveränderter Ausgangsgröße")
Beenden des Ziehens
Jede Drag & Drop-Animationssequenz endet mit der Animation für das Beenden des Ziehens (dragSourceEnd), die angezeigt wird, wenn Benutzer ein gezogenes Objekt ablegen. Die Animation für das Beenden des Ziehens wird nur verwendet, wenn vorher die Animation für das Starten des Ziehens verwendet wurde.
Mit der Animation für das Beenden des Ziehens wird die Ziehquelle (das gezogene Objekt) an seiner endgültigen Position platziert. Dabei werden die visuellen Änderungen an der Ziehquelle und den betroffenen Elementen rückgängig gemacht, die von der Animation für das Starten des Ziehens angewendet wurden. In einem Aufruf von dragSourceEnd entsprechen die betroffenen Objekte immer den Objekten, die im Aufruf von dragSourceStart verwendet wurden.
Um die dragSourceEnd-Funktion zu verwenden, müssen Sie das von den Benutzern abgelegte Objekt, die endgültige Position des abgelegten Objekts und die betroffenen Objekte kennen (falls diese in der dragSourceStart-Funktion enthalten waren).
Die folgenden Bilder veranschaulichen die Beziehung zwischen der Ziehquelle und den betroffenen Objekten in der Animation für das Beenden des Ziehens. Das erste Bild zeigt ein Objekt, bevor Benutzer das Objekt auf einem Satz von betroffenen Objekten ablegen. Die Ziehquelle erscheint größer als normal und zur Liste versetzt. Die betroffenen Objekte erscheinen kleiner als normal.
.png "Vier Objekte mit vergrößerter und von der Ebene der drei betroffenen leicht verkleinerten Objekte versetzter Ziehquelle")
Das nächste Bild zeigt eine Situation, in der sich das abgelegte Objekt nicht auf andere Objekte auswirkt. Auch hier scheint die Ziehquelle größer und von den anderen versetzt. Die anderen Objekte werden jedoch mit normaler Größe angezeigt.
.png "Vier Objekte mit vergrößerter Ziehquelle, die von den drei anderen Objekten mit unveränderter Ausgangsgröße versetzt sind")
Wenn Benutzer die Ziehquelle ablegen, nehmen alle Objekte wieder ihre normale Größe an und werden bei Bedarf umpositioniert.
Starten des Zwischenziehens
Verwenden Sie die Animation für das Starten des Zwischenziehens (dragBetweenEnter), wenn Benutzer ein Objekt (die Ziehquelle) zwischen zwei andere Objekte ziehen, zwischen denen es abgelegt werden kann. Diese Animation zeigt den Benutzern die betroffenen Objekte, die auseinanderrücken, um Platz für die Ziehquelle zu schaffen, falls sie an dieser Position abgelegt wird.
Um die dragBetweenEnter-Funktion zu verwenden, müssen Sie die betroffenen Objekte und die Distanz kennen, um die diese Objekte bei der Animation auseinanderrücken.
Die folgenden Bilder zeigen die Bewegung der betroffenen Objekte als Reaktion auf die Ziehquelle. Das erste Bild zeigt die betroffenen Objekte, bevor die Ziehquelle die Animation für das Starten des Zwischenziehens auslöst.
.png "Ziehquellenobjekt, das zwei betroffene Objekte überlappt, die an ihren ursprünglichen Positionen angezeigt werden")
Im nächsten Bild hat die Animation für das Starten des Zwischenziehens die zwei Objekte auf den beiden Seiten der Ziehquelle veranlasst, auseinanderzurücken.
.png "Ziehquellenobjekt, das zwei betroffene Objekte überlappt, die auseinandergerückt sind, um den Ablageort anzuzeigen")
Beenden des Zwischenziehens
Verwenden Sie die Animation für das Beenden des Zwischenziehens (dragBetweenLeave), wenn Benutzer die Ziehquelle von einem zulässigen Ablagebereich zwischen zwei Objekten wegziehen. Diese Animation zeigt den Benutzern, dass die Ziehquelle nicht mehr so positioniert ist, dass sie zwischen den beiden Objekten abgelegt werden kann. Die Animation für das Beenden des Zwischenziehens wird nur nach der Animation für das Starten des Zwischenziehens verwendet.
Die Aktion der Animation für das Beenden des Zwischenziehens stellt das Gegenteil der Animation für das Starten des Zwischenziehens dar. Die Animation für das Beenden des Zwischenziehens verschiebt die betroffenen Objekte an ihre ursprünglichen Positionen zurück.
Um die dragBetweenLeave-Funktion zu verwenden, müssen Sie nur die betroffenen Objekte kennen.
Die folgenden Bilder zeigen die Bewegung der betroffenen Objekte als Reaktion auf die Ziehquelle. Das erste Bild zeigt die betroffenen Objekte, die als Reaktion auf die Position der Ziehquelle durch die Animation für das Starten des Zwischenziehens getrennt wurden.
Im nächsten Bild wurde die Animation für das Beenden des Zwischenziehens aufgerufen, um die betroffenen Objekte wieder an ihre Ausgangspositionen zu verschieben.
Weitere Ressourcen
Codebeispiele, die die Verwendung der Animationen für Drag & Drop-Funktionen veranschaulichen, finden Sie im HTML-Beispiel für die Animationsbibliothek.
Bewährte Methoden bei der Verwendung dieser Animationen finden Sie unter Richtlinien und Prüfliste für Drag & Drop-Animationen.
Verwandte Themen
Animieren der Benutzeroberfläche
dragSourceStart