Angular CDK 拖放：多方向移动
内容提要
介绍了Angular CDK Drag & Drop模块的使用方法，支持拖放界面、列表排序、项目转移、动画效果、触摸设备、自定义拖动手柄、预览、占位符、水平列表和轴锁定。详细介绍了垂直、水平和混合排序方式。
延伸解读
数据模型更新：拖放后手动同步
Angular CDK 的拖放功能仅负责界面上的元素重排，不会自动更新组件中的数据模型。开发者必须监听 cdkDropListDropped 事件，并在事件处理函数中调用 moveItemInArray 等工具函数来同步数据。否则，界面与数据将不一致，导致后续操作出错。
方向选择：垂直、水平与混合模式
cdkDropList 默认垂直排序，通过 cdkDropListOrientation 属性可改为水平。从 Angular Material v18.1.0 起，新增 mixed 模式，允许项目换行，适合需要多行排列的列表。但 mixed 模式使用 DOM 移动策略，无法实现动画效果，而垂直和水平模式则支持平滑动画。
动画与换行的权衡
垂直和水平排序利用 CSS transform 实现动画，提升用户体验，但仅支持单方向排列。若列表需要换行，必须使用 mixed 模式，但会牺牲动画。开发者应根据实际需求选择：优先动画则用垂直/水平，优先换行则用 mixed。
Q&A
Angular CDK Drag & Drop模块的主要功能是什么？
Angular CDK Drag & Drop模块支持拖放界面、列表排序、项目转移、动画效果等多种功能。
如何创建可重新排序的集合？
通过将一组cdkDrag元素包装在cdkDropList中，可以创建可重新排序的集合。
如何改变列表的排序方向？
可以通过设置cdkDropListOrientation属性为horizontal来改变列表的排序方向。
Angular CDK支持哪些排序方向？
Angular CDK支持垂直（默认）和水平两种排序方向。
混合排序方向的功能是什么？
混合排序方向允许项目换行，但不支持动画效果，从Angular Material v18.1.0开始支持。
如何更新数据模型？
可以监听cdkDropListDropped事件，在用户完成拖动后更新数据模型。
