问题标签 [angular-cdk-drag-drop]

我正在使用 Angular CDK 拖放（Material UI），我想在 CdkDragMove 事件对象中获取被拖动项目的当前索引。谁能指导我？

我正在开发一个项目，该项目使用 Angular 的 cdk-drag-and-drop 功能来对卡片网格进行排序。因为它是一个网格，所以我以这个 StackBlitz为例。这个例子正是我想要实现的。

但是与我的应用程序略有不同。在我的情况下，网格本身和网格上的所有项目（卡片）都是独立的 Angular 组件。这意味着我有以下两个 HTML..

网格 HTML：

以及网格中每张卡片的 HTML（'my-card-component'）：

但是，这并没有达到预期的效果。然后，当我将卡片的 HTML 移回它的父组件 HTML 文件（因此，网格）时，它确实可以工作。显然，跨多个组件使用 cdk 指令是行不通的。这是预期的行为吗？还是应该跨多个组件工作？

我已经尝试将cdkDrag-directive 添加到my-card-componenthtml-element 上，因为这样会将该指令保留在网格组件中。这使得卡片可拖动，但我不能将它放在任何地方。此外，它使整个卡片可拖动，因此似乎忽略cdkDragHandle了子组件中的 。所以这并没有让我更进一步。

最好，我会保持组件的分离并仍然使用 cdk 的指令。这可能吗？

请在我的带有模拟数据的 html 和 ts 文件下面找到。在列表中拖动时，我想放在当前视图中未显示的项目上，因为我需要在拖动时向上或向下滚动页面。如何在下面的代码中实现滚动功能请在下面找到我的 ts 和 html 文件和图像的详细信息以供参考

我们有一个 Angular 11 应用程序，我们在其中启用了从一个列表拖放到多个其他列表的功能。它运行良好，在放置事件中，我们可以识别移动的数据、源列表和目标列表。

但是，该项目的掉落存在一个问题。如果我将鼠标悬停在下拉列表上，我会在新列表中看到该项目，但如果我继续将其拖离任何其他 dropList，则该项目将继续显示它将落入最后一个悬停的 dropList。

如果我最终在不是 dropList 的 DOM 元素上释放鼠标按钮，我希望该项目返回其原始列表。

这是可能的吗？有人可以指出文档的相关部分，或者提供一个例子吗？

是否可以以角度拖放整个组件？如何将组件拖放到拖放区？被丢弃组件中的 ng-model 绑定是否会在被丢弃区域中工作？

我目前正在使用 mat-table 作为文档中的这个简单示例：

为了能够更改行的顺序，然后我使用 cdk 拖放，使用 mat-row 右侧的 cdkDrag 指令和 mat-table 右侧的 cdkDropList 指令。我还需要使用其他属性，如 cdkDropListSortPredicate，但我会尽量简单地解释我的问题：我已经观察到事件和谓词的几个问题。在进行操作时检查 html 代码时，我看到占位符有时放置在 tbody 之外，因为附加到 CdkDropList 的元素是表，而不是要重新排序的行所在的 tbody。

那么，正如主题中提到的，您是否曾经成功地将 cdkDropList 指令应用于由角表（mat-table）生成的 tbody？或者你能想出一个解决办法吗？（我试图创建自己的指令来修改附加到 CdkDropList 但没有成功的元素）

更新 1：我观察到这些问题，尤其是在拖动元素来自另一个列表的情况下。它是在 tbody 外部生成的占位符。所以，这个问题不能用 CdkDropListDropped 解决。

更新2：这是理解我的问题的stackblitz链接。在该示例中，其中一个问题是，如果您越过标题，我不希望占位符出现在列表的第一个位置。因为从视觉上看，您可能看起来可以将元素放在这里。PS：一旦我解决了这个问题，对我来说另一个困难将是根据条件隐藏占位符。如果在将元素拖动到正确位置之前将其拖动到错误位置，则占位符将出现在最后一个位置。我不想要那个。

目标是制作一个全宽的拖放区。我可以在其中放置“小部件”并在放置区周围自由拖动它们。但扭曲的是我也可以删除列表小部件，我也可以在其中删除其他小部件..

所以我有这个stackblitz 的代码，这个视频显示了奇怪的行为

有什么帮助吗？我可以删除 cdkdroplist 指令并假设所有内容都是 Draggable 项目，但会丢失元素上的列表功能......

和这个人一样的问题

app.component.html

app.component.ts

是否可以使用 cdk 拖放重新排列 ng-select 中的多个选择值。您可以检查Stackblitz 实施正在更改模型值，但未反映在下拉列表中。用户可以使用 cdk Drap and Drop 重新排列下拉列表中的多个选定值的方式。带有 cdk 的 ng-select 的 HTML 拖放

是否可以将此功能与 ng-select 或任何其他建议一起使用以实现相同目的。

我正在使用拖放列表让用户以正确的顺序排列项目。我遇到的问题是我的代码中目前有一个setTimeout，因为检索列表顺序的方法不会在删除时立即更新。我怀疑它会在动画之后更新。

HTML

TS

如果我想知道当前的排序顺序，如何摆脱超时？

我需要将DropListRef其与使用该方法创建的另一个列表相关联createDropList()。DropListRef我需要的：