Angular 拖放

@angular/cdk/drag-drop 模块提供了一种简单声明式构建拖放界面的方法，支持自由拖动、列表内排序、列表、动画、触摸设备、通过自定义拖动句柄移动列表项、预览和占位符，以及水平列表和沿轴锁定。

首先，将 DragDropModule 导入到您要使用拖放功能的 ngmodule 中。现在，您可以添加 cdkDrag 指令使元素可拖动。当位于 cdkDropList 元素外部时，可拖动元素可以自由地在页面上移动。您可以将元素添加到 cdkDropList 中，这些元素可以在此处放置。

基本拖放

在 cdkDrag 元素集合周围添加 cdkDropList 会将可拖动元素分组到一个可重新排序的集合中。当元素移动时，项目会自动重新排列。请注意，这不会更新您的数据模型；您可以在用户完成拖动后收听 cdkDropListDropped 事件来更新数据模型。

拖放排序

cdkDropList 指令支持在连接的下拉区域之间移动被拖动的项。您可以通过设置 cdkDropListConnectedTo 属性或将元素包装在具有 cdkDropListGroup 属性的元素中来连接一个或多个 cdkDropList 实例。

拖放连接排序

请注意，cdkDropListConnectedTo 既可以与另一个 cdkDropList 的直接引用一起使用，也可以通过引用另一个下拉容器的 ID 来使用。

如果您有未知数量的连接下拉列表，可以使用 cdkDropListGroup 指令自动设置连接。

请注意，添加到组下的任何新的 cdkDropList 都将自动添加到所有其他列表中。

附加数据

您可以将任何任意数据与 cdkDrag 和 cdkDropList 结合，分别通过设置 cdkDragData 或 cdkDropListData。这两个指令触发的事件都包含此数据，因此您可以轻松识别拖动或放置交互的来源。

样式

cdkDrag 和 cdkDropList 指令仅包含功能所必需的样式。然后，应用程序可以通过设置指令添加的 CSS 类的样式来定制元素。

动画

拖放模块支持在排序列表中的元素时进行动画，并将其从用户放置的位置动画到最终位置。要设置您的动画，您必须定义一个以 transform 属性为目标的 transition。可以使用以下类来进行动画：

.cdk-drag - 如果您向此类添加 transition，它将在用户排序列表时进行动画。

.cdk-drag-animating - 当用户停止拖动时，此类将添加到 cdkDrag。如果您添加了 transition，cdkDropList 将动画元素从其放置位置到 cdkDropList 容器中的最后一个位置。

示例动画

使用句柄自定义拖动区域

默认情况下，用户可以拖动整个 cdkDrag 元素来移动它。如果您限制用户只能使用句柄元素，可以将 cdkDragHandle 指令添加到 cdkDrag 内的元素。请注意，您可以拥有任意数量的 cdkDragHandle 元素。

当 cdkDrag 元素被提起时，拖动时会出现一个预览元素。默认情况下，它将是父元素的克隆，位于用户光标旁边。但是，可以通过 *cdkDragPreview 提供自定义模板来定制此预览。

使用默认配置，自定义预览的大小将与原始被拖动元素的大小不匹配，因为 CDK 不会对元素的内容做出假设。如果您希望匹配形状，可以将 true 传递给 matched shape 输入。

请注意，克隆的元素将删除其 id 属性，以避免页面上存在多个具有相同 id 的元素。这将导致任何以 ID 为目标的 CSS 无法应用。

列表方向

cdkDropList 指令默认假定列表是垂直的，并且可以通过将 orientation 属性设置为 `"horizontal"` 来更改。

限制在元素内移动

如果您想阻止用户将 cdkDrag 元素拖出另一个元素，可以将 CSS 选择器传递给 cdkDragBoundary 属性。该属性通过接受一个选择器并在 DOM 中向上搜索，直到找到匹配的元素来工作。如果找到匹配项，它将是元素无法拖出的边界。当 cdkDrag 放置在 cdkDropList 内时，也可以使用 cdkDragBoundary。

拖动基础

当最终用户向任何方向滑动至少 5 像素时，拖动操作开始。这是可自定义的，可以使用 dragTolerance 输入进行更改。否则，该交互将被视为单击，并触发 dragClick 事件。

当拖动开始时，会触发 dragStart 事件。通过将 cancelled 属性设置为 true 可以取消事件，以防止任何实际移动。

在执行任何实际移动之前，还会触发 dragMove 事件，其中包含指针的最后和下一个位置。每次检测到围绕元素拖动时的移动时都会触发此事件。

用户释放鼠标/触摸后，拖动幽灵元素将从 DOM 中移除，并发出 dragEnd 事件。

由于 dragMove 事件的性质，它可能在短时间内触发多次，这可能会导致复杂操作的性能问题，当这些操作被触发时。

带幽灵拖动

igxDrag 指令可以通过将其添加到模板中来应用于任何 DOM 元素。

HTML

igxDrag 指令的默认行为是保持基本元素不变，并在最终用户执行拖动操作时创建一个幽灵元素。

在幽灵元素呈现到页面之前，会触发 ghostCreate 事件，其中包含有关添加的幽灵元素的信息。该事件在 dragStart 事件之后立即触发。如果 dragStart 被取消，将不会创建幽灵，ghostCreate 事件也不会相应触发。

在幽灵元素即将被移除之前，将触发 ghostDestroy 事件。

自定义幽灵

默认情况下，幽灵元素是使用 igxDrag 的基本元素的副本。可以通过直接将模板引用传递给 ghostTemplate 输入来定制它。

无幽灵拖动

如果您想移动应用了 igxDrag 指令的基本元素，可以将 ghost 输入设置为 false。这样，将不会渲染额外的幽灵元素，如果您需要在拖动元素时应用自定义样式，可以直接将其应用于基本元素。

动画

当元素被拖动时，默认情况下不会应用任何动画。

您可以随时将过渡动画应用于 igxDrag，但建议在拖动结束或元素当前未被拖动时使用它。这可以通过使用 transitionToOrigin 和 transitionTo 方法来实现。

transitionToOrigin 方法顾名思义，会将当前被拖动的元素或其幽灵动画到拖动开始的起始位置。transitionTo 方法会将元素动画到相对于页面的特定位置（例如 pageX 和 pageY）或指定元素的位置。如果元素当前未被拖动，它将动画或创建一个幽灵并将其动画到所需位置。

这两个函数都有可以设置的参数来定制过渡动画，并设置持续时间、缓动函数或延迟。如果设置了特定的起始位置，它将从该位置开始动画元素。

如果创建了幽灵，过渡动画将被移除，igxDrag 指令将返回其初始状态。如果没有创建幽灵，它将保持其位置。在这两种情况下，将根据动画持续时间触发 transitioned 事件。如果没有应用动画，它将立即触发。

您可以进行其他涉及元素转换的动画。像任何其他元素一样，可以使用 Angular Animations 或纯 CSS Animations 来实现，可以应用于基本的 igxDrag 元素或其幽灵。如果您想将它们应用于幽灵，则需要定义一个自定义幽灵并应用其元素。

忽略可拖动元素

任何拖动操作。这将使这些元素完全可交互并接收所有鼠标事件。

Drop 指令

当使用 igxDrag 指令绘制的元素需要放置在某个区域时，可以使用 igxDrop 来实现此行为。它提供了事件，您可以使用这些事件来确定一个元素是否进入了它所应用的元素的边界，以及它是否被放置在其中。

igxDrop 指令可以像 igxDrag 指令一样应用于任何 DOM 元素。

默认情况下，igxDrag 指令不应用任何逻辑来修改 DOM 中被拖动元素的位置。因此，您需要指定 dropStrategy 或实现自定义逻辑。Drop 策略将在下一节中讨论。

Default - 当元素在 igxDrop 元素上被放下时，不执行任何操作，并实现为一个名为 IgxDefaultDropStrategy 的类。

Append - 始终将放置的元素插入为最后一个子项，并实现为一个类。

可以通过将 dropStrategy 输入设置为上面列出的类之一来应用策略。提供的值必须是一个类型而不是一个实例，因为 igxDrop 需要自行创建和管理。

示例

TypeScript

TypeScript

取消放置策略

当使用特定的放置策略时，可以通过在 dropped 事件中将 Cancel 属性设置为 true 来取消其行为。dropped 事件特定于 igxDrop。如果未将放置策略应用于 igxDrop，则取消事件将没有副作用。

示例