Performs an animation when the user begins to drag an object.
The following video demonstrates the drag animations:
WinJS.UI.Animation.dragSourceStart(dragSource, affected).done( /* Your success and error handlers */ );
Element or elements being dragged.
- affected [optional]
Element or elements whose position is affected by the movement of the dragged object. Typically, this is all other items in a reorderable list.
An object that completes when the animation is finished.
The parameters of this function can be expressed in several ways:
- As the special value "undefined", which means that the animation has no such target
- As a single object
- As a NodeList (for example, the result of querySelectorAll)
- As an HTMLCollection
The position of the dragged item is normally updated through the CSS -ms-transform property. However, dragSourceStart overwrites that -ms-transform property. Therefore, to see expected behavior, you should wrap the dragged element in a second element which acts as a new parent. Apply dragSourceStart to the original element and -ms-transform to the new parent element.
Minimum WinJS version
- Animating drag-and-drop sequences
- Guidelines and checklist for drag-and-drop animations
- HTML animation library sample