创建拖放顺序动画 (HTML)
[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]
当用户用自己的手指或输入设备（例如鼠标或触笔）移动对象时，使用拖放动画。常见拖放操作包括移动列表中的单个项目，和将一个项目放在另一个项目上。
注意 只有当用户移动对象时，才使用拖放动画。若要以其他方式移动对象，请使用重新定位动画。
此动画集包括以下功能：
- dragSourceStart：用户开始拖动对象
- dragBetweenEnter：用户将对象拖动到其他两个对象之间可放置的区域
- dragBetweenLeave：用户将对象拖离潜在放置位置
- dragSourceEnd：用户放置已经拖动的对象
默认的拖动支持在适用于 JavaScript 的 ListView 和 GridLayout 中可用。当你在 UI 中使用这些控件时，拖放动画均已内置。但是，如果你将拖放功能扩展到其他控件（特别是你自己的自定义控件）中，我们在本主题中所述的动画将很有用。
以下视频演示与拖放操作关联的动画：
拖动开始
每个拖放动画序列均以拖动开始 (dragSourceStart) 开始动画，当用户开始拖动对象时显示。
此动画修改拖动源（即被拖动的对象）和一个或多个受影响对象的外观。受影响的对象是可能变换位置以响应拖放事件的对象。例如，重新排序列表时，列表中除了拖动源，所有项目都是受影响的对象，因为它们在列表中的位置结果可能更改。受影响的项将以动画显示，提醒用户这些项将如何更改位置来响应当前的操作。注意，并非所有拖动源都有受影响的对象。
要使用 dragSourceStart 函数，你需要知道用户拖动的对象及其受影响的对象。
下图显示了拖动开始动画中拖动源和受影响对象的关系。第一个图显示了用户开始拖动对象之前拖动对象及其相邻对象。
.png "四个对象具有相同大小，其中一个标记为拖动源。")
当用户选择对象并开始拖动时，被拖动的对象开始变大，并且受影响的对象开始变小。
.png "四个对象，拖动源增加大小，其他三个受影响的对象大小有点儿缩小")
下图显示了相邻对象不受影响的情况。
.png "四个对象，拖动源增加大小，其他三个对象保持原始大小不变")
拖动结束
每个拖放动画序列均以拖动结束动画 (dragSourceEnd) 结束，当用户放置拖动的对象时显示。除非首先使用了拖动开始动画，否则从不使用拖动结束动画。
此拖动结束动画将拖动源（正在拖动的对象）放置在其最终位置。与此同时，它还会删除对拖动源进行的可视更改，以及由拖动开始动画应用的受影响的项目。在调用 dragSourceEnd 中使用的受影响对象始终与在调用 dragSourceStart 中使用的对象相同。
要使用 dragSourceEnd 函数，你需要知道用户拖动的对象、放置对象的最终位置，以及受影响的对象（如果 dragSourceStart 函数包括它们）。
下图显示了拖动结束动画中拖动源以及其受影响对象的关系。第一个图显示了在用户放入一组受影响对象之前的对象。拖动源看起来大于其正常大小，并且偏离列表中的位置。受影响的对象看起来小于其正常大小。
.png "四个对象，拖动源增加大小，并偏离其他三个受影响对象的平面，三个受影响对象的大小有点儿缩小")
下个图像显示了放置的对象不影响其他对象的情况。拖动源看起来仍然较大并偏离其他对象，但其他对象以其正常大小显示。
.png "四个对象，拖动源增加大小并偏离其他三个对象，其他三个对象保持原始大小不变")
当用户放置拖动源后，所有对象将返回其正常大小，并在必要时重新定位。
在进入间拖动
当用户将可以置于其他两个对象之间的一个对象（源对象）拖动到这两个对象之间时，使用在进入间拖动动画 (dragBetweenEnter)。此动画向用户显示，如果用户选择将拖动源放在该位置，受影响的对象将移开，为拖动源腾出位置。
要使用 dragBetweenEnter 函数，你需要知道受影响的对象以及这些对象作为该动画的一部分要移动的方向和距离。
下图显示了受影响对象为响应拖动源而发生的移动。第一个图显示了在拖动源触发在进入间拖动动画之前受影响的对象。
.png "拖动源对象覆盖在其原始位置显示的两个受影响的对象")
在下个图像中，在进入间拖动动画导致将拖动源任一侧的两个对象移开。
.png "拖动源对象覆盖两个受影响的对象，两个受影响的对象分开以显示放置位置")
在离开间拖动
当用户将拖动源拖离两个对象之间的合法放置区域时，使用在离开间拖动动画 (dragBetweenLeave)。此动画向用户显示，拖动源不再放在两个对象之间的位置。在离开间拖动动画仅在在进入间拖动动画之后使用。
在离开间拖动动画的操作与在进入间拖动动画相反。在离开间拖动动画将受影响的对象返回到其原始位置。
要使用 dragBetweenLeave 函数，你只需要知道受影响的对象。
下图显示了受影响对象为响应拖动源而发生的移动。第一个图显示了受影响的对象被拖动源进入动画分开来响应拖动源的位置。
在下图中，调用了在离开间拖动动画，使受影响的对象返回其原始位置。
其他资源
有关用于展示拖放动画功能的使用的代码示例，请参阅 HTML 动画库示例。
有关设计这些动画的使用的最佳做法，请参阅拖放动画指南和清单。
相关主题
dragSourceStart