Drag (拖拽)

拖动某一项时，其他项滑开让位，并按新的顺序排好。

在[应用位置]添加“拖拽排序列表”(Drag-to-Reorder List)，也叫可排序列表(sortable list)。
被拖动的项直接跟随指针并轻微抬起，其他项平滑地滑开让位；松开后，它迅速落入最近的位置。
同时支持触屏和鼠标，并提供用键盘移动项目的方式，把新位置播报给屏幕阅读器。

横向滑动列表行，露出删除或归档等操作按钮。

在[应用位置]添加“滑动删除”(Swipe to Delete)交互，也叫 swipe actions 或 swipe to reveal。
横向拖动某一行时，它直接跟着手指移动，露出后面的归档、删除等操作按钮，按钮完全露出后停住；松开后平滑地滑到位，不要回弹。
横向滑动时仍要保证纵向滚动可用，并让键盘和屏幕阅读器用户无需滑动也能执行相同操作。

向下拖动列表会露出加载图标，松开后重新加载内容。

在[应用位置]添加“下拉刷新”(Pull to Refresh)交互，也叫 swipe to refresh。
从顶部向下拉列表时，列表带着一点阻力跟随手指，并露出一个随拉动旋转的加载图标；松开后加载图标在内容重新加载期间持续旋转，完成后列表平滑地收回顶部。
只在列表已经滚动到顶部时才触发，并为键盘和屏幕阅读器用户另外提供一个普通的刷新按钮。

拖动分隔线，一侧显示一张图片，另一侧显示另一张。

在[应用位置]添加“前后对比滑块”(Before-After Slider)，也叫 image comparison slider 或 compare slider。
两张图片上下叠放，拖动一条竖直分隔线时，一张露出更多、另一张露出更少；分隔线紧跟指针，没有延迟。
分隔线初始位于中间，并支持触摸和方向键操作。

输入框获得焦点或已有内容时，占位标签上移并缩小到输入框上方。

在[应用位置]添加“浮动标签”(Floating Label)，也叫浮动标签(float label)或动画占位符(animated placeholder)。
输入框获得焦点或已有值时，原本在框内的标签平滑而快速地上移并缩小，停到输入框的上边缘；只有在输入框为空且失去焦点时才落回原处。
保持它是与输入框关联的真正 label，并确保输入框高度不变，让表单永远不会跳动。

点击时爱心图标填充颜色，并迸发出小粒子或跳动一下。

在[应用位置]添加“点赞爱心”(Like / Heart Burst)动画，也叫爱心动画(heart animation)或收藏切换(favorite toggle)。
点赞时爱心填充颜色并带弹性地弹一下，同时一圈光环和小圆点向外迸发并淡出，整体快速、俏皮；取消点赞时爱心只是安静地变空。
做成带按下状态的真正切换按钮，只在开启时播放迸发效果。

按住元素片刻即可触发额外操作或进度填充。

在[应用位置]添加“长按”(Long Press)交互，也叫 press and hold 或 touch and hold。
按住时元素轻微下沉，同时进度填充以稳定的速度扫过它；填满后元素带弹性地回弹并打开菜单，提前松开则取消并重置填充。
为键盘和屏幕阅读器用户提供另一种途径来执行相同操作，并且不要让长按触发文本选择或浏览器自带的右键菜单。