Animating drag-and-drop sequences (HTML)
Use drag-and-drop animations when users move objects with their fingers or with an input device, such as a mouse or stylus. Common drag-and-drop actions include moving a single item within a list and dropping one item on top of another.
Note Use the drag-and-drop animations only when the user is moving the object. To move the object otherwise, use the reposition animation.
This set of animations consists of the following functions:
- dragSourceStart: the user begins to drag an object
- dragBetweenEnter: the user drags an object between two other objects that it can be dropped between
- dragBetweenLeave: the user drags an object away from a potential drop location
- dragSourceEnd: the user drops an object that they have been dragging
Default drag support is available in ListView and GridLayout for JavaScript. The drag-drop animations are built-in when you use these controls in your UI. However, the animations we talk about in this topic are useful if you extend drag-drop functionality into other controls, particularly your own custom controls.
The following video demonstrates the animations associated with a drag-and-drop operation:
Drag start
Every drag-and-drop animation sequence begins with a drag start (dragSourceStart), which is shown when the user begins to drag an object.
This animation modifies the appearance of both the drag source (the object being dragged) and one or more affected objects. An affected object is an object that might change position in response to the drag-and-drop sequence. For example, when you reorder a list, all items in the list other than the drag source are affected objects because their position in the list could change as a result. Affected items are animated to show the user how those items would change position in response to the current action. Note that not all drag sources have affected objects.
To use the dragSourceStart function, you'll need to know the object that the user is dragging and its affected objects.
The following images show the relation of the drag source to the affected objects in the drag start animation. The first image shows the drag object and its neighbors before the user begins to drag the object.
.png "Four objects of the same size, one labelled as the drag source")
When the user selects the object and begins to drag it, the dragged object becomes larger and the affected objects become smaller.
.png "Four objects, with the drag source increased in size and the other three affected objects somewhat decreased in size")
The next image shows the case where neighboring objects are not affected.
.png "Four objects, with the drag source increased in size and the other three unchanged from their initial size")
Drag end
Every drag-and-drop animation sequence ends with the drag end animation (dragSourceEnd), which is shown when the user drops a dragged object. The drag end animation is never used unless the drag start animation was used first.
The drag end animation places the drag source (the object being dragged) into its final position. At the same time, it removes the visual changes to the drag source and affected items that were applied by the drag start animation. The affected objects in a call to dragSourceEnd are always the same objects used in the call to dragSourceStart.
To use the dragSourceEnd function, you'll need to know the object that the user is dropping, the final position of the dropped object, and the affected objects (if the dragSourceStart function included them).
The following images show the relation of the drag source to its affected objects in the drag end animation. The first image shows an object before the user drops it into a set of affected objects. The drag source appears larger than its normal size, and offset from the list. The affected objects appear smaller than their normal size.
.png "Four objects, with the drag source increased in size and offset from the plane of the other three affected objects, which are somewhat decreased in size")
The next image shows the case where the dropped object does not affect other objects. The drag source again appears larger and offset from the others, but the other objects appear at their normal size.
.png "Four objects, with the drag source increased in size and offset from the other three objects, which are unchanged from their initial size")
Once the user drops the drag source, all objects return to their normal size, repositioned if necessary.
Drag between enter
Use the drag between enter animation (dragBetweenEnter) when the user drags an object (the drag source) between two other objects that it can be dropped between. This animation shows the user the affected objects that will move apart to make room for the drag source, if the user chooses to drop the drag source in that position.
To use the dragBetweenEnter function, you'll need to know the affected objects and the direction and distance that those objects will move as part of the animation.
The following images show the movement of the affected objects in response to the drag source. The first image shows the affected objects before the drag source triggers the drag between enter animation.
.png "Drag source object overlapping two affected objects which are shown in their original positions")
In the next image, the drag between enter animation has caused the two objects on either side of the drag source to move apart.
.png "Drag source object overlapping two affected objects which have separated to show the drop location")
Drag between leave
Use the drag between leave animation (dragBetweenLeave) when the user drags the drag source away from a legitimate drop area between two objects. This animation shows the user that they no longer have the drag source in position to drop between those two objects. The drag between leave animation is used only after a drag between enter animation.
The action of the drag between leave animation is the opposite of the drag between enter animation. The drag between leave animation moves the affected objects back to their original positions.
To use the dragBetweenLeave function, you'll just need to know the affected objects.
The following images show the movement of the affected objects in response to the drag source. The first image shows the affected objects separated by the drag source enter animation, in response to the drag source's position.
In the next image, the drag between leave animation has been called to bring the affected objects back to their initial position.
Other resources
For code examples that demonstrate the use of the drag-and-drop animation functions, see the HTML animation library sample.
For design best practices in the use of these animations, see Guidelines and checklist for drag-and-drop animations.
Related topics
dragSourceStart