|
| 1 | +--- |
| 2 | +description: Use drag-and-drop animations when users move objects, such as moving an item within a list, or dropping an item on top of another. |
| 3 | +title: Drag animations |
| 4 | +ms.assetid: 6064755F-6E24-4901-A4FF-263F05F0DFD6 |
| 5 | +label: Motion--Drag and drop |
| 6 | +template: detail.hbs |
| 7 | +ms.date: 09/24/2020 |
| 8 | +ms.topic: article |
| 9 | +keywords: windows 10, uwp |
| 10 | +ms.localizationpriority: medium |
| 11 | +--- |
| 12 | +# Drag animations |
| 13 | + |
| 14 | +Use drag-and-drop animations when users move objects, such as moving an item within a list, or dropping an item on top of another. |
| 15 | + |
| 16 | +> **Important APIs**: [**DragItemThemeAnimation class**](/uwp/api/windows.ui.xaml.media.animation.dragitemthemeanimation) |
| 17 | +
|
| 18 | +## Do's and don'ts |
| 19 | + |
| 20 | +### Drag start animation |
| 21 | + |
| 22 | +- Use the drag start animation when the user begins to move an object. |
| 23 | +- Include affected objects in the animation if and only if there are other objects that can be affected by the drag-and-drop operation. |
| 24 | +- Use the drag end animation to complete any animation sequence that began with the drag start animation. This reverses the size change in the dragged object that was caused by the drag start animation. |
| 25 | + |
| 26 | +### Drag end animation |
| 27 | + |
| 28 | +- Use the drag end animation when the user drops a dragged object. |
| 29 | +- Use the drag end animation in combination with add and delete animations for lists. |
| 30 | +- Include affected objects in the drag end animation if and only if you included those same affected objects in the drag start animation. |
| 31 | +- Don't use the drag end animation if you have not first used the drag start animation. You need to use both animations to return objects to their original sizes after the drag sequence is complete. |
| 32 | + |
| 33 | +### Drag between enter animation |
| 34 | + |
| 35 | +- Use the drag between enter animation when the user drags the drag source into a drop area where it can be dropped between two other objects. |
| 36 | +- Choose a reasonable drop target area. This area should not be so small that it is difficult for the user to position the drag source for the drop. |
| 37 | +- The recommended direction to move affected objects to show the drop area is directly apart from each other. Whether they move vertically or horizontally depends on the orientation of the affected objects to each other. |
| 38 | +- Don't use the drag between enter animation if the drag source cannot be dropped in an area. The drag between enter animation tells the user that the drag source can be dropped between the affected objects. |
| 39 | + |
| 40 | +### Drag between leave animation |
| 41 | + |
| 42 | +- Use the drag between leave animation when the user drags an object away from an area where it could have been dropped between two other objects. |
| 43 | +- Don't use the drag between leave animation if you have not first used the drag between enter animation. |
| 44 | + |
| 45 | +## Related articles |
| 46 | + |
| 47 | +- [Animating drag-and-drop sequences](/previous-versions/windows/apps/jj649427(v=win.10)) |
| 48 | +- [Quickstart: Animating your UI using library animations](/previous-versions/windows/apps/hh452703(v=win.10)) |
| 49 | +- [**DragItemThemeAnimation class**](/uwp/api/windows.ui.xaml.media.animation.dragitemthemeanimation) |
| 50 | +- [**DropTargetItemThemeAnimation class**](/uwp/api/windows.ui.xaml.media.animation.droptargetitemthemeanimation) |
| 51 | +- [**DragOverThemeAnimation class**](/uwp/api/windows.ui.xaml.media.animation.dragoverthemeanimation) |
0 commit comments