Guidelines and checklist for drag-and-drop animations (Windows Store apps)

Appropriate use of dragSourceStart

  • Use dragSourceStart when the user begins to move an object directly.
  • Include affected objects in the animation if and only if there are other objects that can be affected by the drag.
  • Allow some object movement before triggering the dragSourceStart animation to start a drag-and-drop sequence. This will prevent the user from accidentally dragging an object that they only meant to tap or select. The recommended threshold is 20 touch independent pixels (TIPs).
  • Use dragSourceEnd to complete an animation sequence that began with dragSourceStart. This reverses the size change in the dragged object caused by dragSourceStart.

Appropriate use of dragSourceEnd

  • Use dragSourceEnd when the user drops a dragged object.
  • When dropping an object to reorder a list, it is often necessary to reposition existing items in the list to make room for the item being dropped. After the dragSourceEnd animation, use the addToList animation with no added item, because the item being added is already present. This will perform the animation to move all elements into their proper positions.
  • If the drag source will disappear after being dropped, use the fadeOut animation. This is used, for example, when a file is dropped onto a folder's icon to store the file in that folder.
  • Include affected objects when using dragSourceEnd if and only if you included affected objects when using the dragSourceStart animation.

Inappropriate use of dragSourceEnd

  • Don't use the dragSourceEnd animation if you have not first used dragSourceStart. They must both be used so that all objects return to their original sizes after the drag-and-drop sequence is complete.

Appropriate use of dragBetweenEnter

  • When the user drags an object to an area where it can be dropped between two other objects, show the dragBetweenEnter animation when the object enters the drop area.
  • 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.

Inappropriate use of dragBetweenEnter

  • Do not use the dragBetweenEnter animation if the drag source cannot be dropped in an area. The dragBetweenEnter animation tells the user that the object being dragged can be dropped between objects beneath it.

Appropriate use of dragBetweenLeave

  • When the user drags an object away from an area where it can be dropped between two other objects, show dragBetweenLeave when the object leaves the drop area.

Inappropriate use of dragBetweenLeave


For general Windows Store requirements, see Certification requirements for Windows apps.

Using the Animation Library animations sample

Animating UI elements with the Animation Library

Quickstart: Animation

WinJS.UI.Animation namespace



Build date: 9/4/2012